360° Product Spin Viewer — Free HTML CSS JS Snippet

Interactive 360° product viewers let shoppers drag or swipe to "spin" a product and inspect it from every angle, a pattern popularized by e-commerce categories like footwear, watches, and cosmetics where texture, shape, and material catch matter more than a single static photo can convey. This snippet builds the full interaction — pointer-driven drag tracking, frame index calculation with wraparound, a fading first-use hint, and a live frame counter — using only CSS and vanilla JavaScript.

How real 360° viewers work

In production, a 360° viewer is backed by a sprite sequence: a product is photographed on a motorized turntable at fixed angle increments (commonly 24, 36, or 72 shots for a full rotation), producing a numbered set of images like frame-01.jpg through frame-24.jpg. The viewer preloads all frames, tracks the user's horizontal drag distance, converts that distance into a frame index using a fixed pixels-per-frame ratio, and swaps the visible <img> source (or background-image) to the corresponding frame. Because the swap happens dozens of times per second during a drag, the eye perceives continuous rotation even though it's really a fast slideshow of discrete photographs.

Faking the illusion without real photography

This demo has no product photography to work with, so it fakes the same illusion using a single CSS-shaded shape instead of 24 separate images. The .bottle-body element uses a repeating-linear-gradient with alternating light and dark bands to mimic how light rakes across a cylindrical glass surface — bright highlight, mid-tone, shadow, repeat. That gradient is rendered at background-size: 400% 100%, four times wider than the element itself, so shifting its background-position-x slides a different portion of the banded pattern into view. The JS layer computes a currentFrame value from 0–23 exactly as a real viewer would, then converts that frame index into a background-position percentage: (currentFrame / 24) * 400. The result reads convincingly as a rotating cylindrical object, even though under the hood it's one gradient sliding sideways rather than 24 discrete photos — the same trick used by CSS-only "spinning" demos before real photography is swapped in.

Pointer tracking and frame math

The interaction uses the unified Pointer Events API (pointerdown, pointermove, pointerup, pointercancel) rather than separate mouse and touch listeners, so the exact same code handles a desktop mouse drag and a mobile touch-drag without branching. On pointerdown, the stage captures the pointer via setPointerCapture() so drag tracking continues correctly even if the cursor leaves the element's bounds mid-drag, and records the starting X coordinate and starting frame. On every pointermove, the horizontal delta since the drag began is divided by a fixed PX_PER_FRAME constant (9px here) and rounded to the nearest whole frame — a smaller constant makes the spin more sensitive to short drags, a larger one requires more deliberate dragging per frame. The resulting frame index wraps around with a double modulo (((frame % 24) + 24) % 24) so dragging past frame 0 in either direction correctly loops to frame 23 or frame 1 instead of hitting a dead stop.

Hint fade and frame indicator

A small "drag to rotate" pill overlay sits at the bottom of the stage on first render, disappearing permanently the moment the user starts their first drag — implemented with a single hasInteracted boolean guard so it never reappears even if the user later releases and re-drags. A frame indicator in the corner ("1 / 24") gives the user a concrete sense of progress through the full rotation, reinforcing that this is a bounded, explorable object rather than an open-ended interaction.

Why this matters for 2026 product pages

As shoppers increasingly compare products across many tabs and rely on visual detail instead of long descriptions, drag-to-inspect viewers reduce return rates by setting accurate physical expectations before purchase. Building the interaction mechanics correctly — smooth wraparound, pointer capture, a fading hint that never annoys returning users — matters more than which rendering technique (real photos vs. CSS) drives the final frame.