How to create a 3D spin

On this page

A 3D spin can be rotated in any direction: left/right/up/down. It shows a product from more angles than a 360 spin, which can only be rotated left/right.

3D spins can be created either by photographing a product on a turntable or by rendering JPEG/PNG images of a 3D computer designed model.

Example 3D spins

Any number of rows and columns can be used. The more images, the smoother the rotation.

48 images

Rows 4
Columns 12
Total 48

50 images

Rows 5
Columns 10
Total 50

Photographing your spin

Those examples were photographed on a turntable. The camera was placed on a tripod for the first row, then the photographs were captured every 30 or 36 degrees as the turntable rotated. Then the camera was moved upwards (in an arc) to a new position, for another set of photos. This process was repeated until all rows had been captured.

Uploading your 3D spin to Sirv

Follow this guide to embed a 3D spin into the HTML of your website.

1. Rename your images

Sirv will create your 3D spin by detecting a sequence in your image file names e.g.

name-rownumber-columnnumber.jpg

Below it the file name of the 1st image in the 2nd row of the spinning bag above:

Bag-02-01.jpg

The screenshot below shows how the 50 images of the bag could be named:

3D spin example - bag 360-degree spin from 50 images

Always put your row digits before your column digits to ensure Sirv generates your spin correctly.

2. Upload your images

Once you've named your files, login to your Sirv account (or create an account).

Upload your images via your Sirv account or upload them via FTP or S3.

3. View your spin

Your images will show in your Sirv account, along with a .spin file automatically generated by Sirv. The file references all the images in your animated 3D spin, plus any custom settings you choose:

3D spin example

4. Edit your 3D spin

Either embed your spin just how it is, or edit the settings such as speed, text overlays or loading text.

Click "Edit" to change the settings:

3D spin edit button

The edit window looks like this:

3D spin edit

If you'd like to change the first image of your spin, change the values for "Start Column" and "Start Row":

3D spin start column

Click "Save" at the bottom:

3D spin save button

5. Embed the spin in your website

Click the spin and under the preview you'll see the two lines of code to copy and paste into your web page. One line is a div and the other a script.

Resizing your spin

Sirv automatically generates images to fit perfectly inside the content area where you've pasted the spin. Images are responsive, so all your visitors will receive scaled images suited to their screen and browser.

To change the size of a spin, change the size of its container (usually inside a div). Alternatively, add a style attribute to the Sirv div and specify the width or height the you would like. The example below will create a spin of 500px max-width:

<div class="Sirv" data-src="https://sirv.sirv.com/website/demos/Bobble Bag/bag.spin" style="max-width:500px"></div>

Embed 3D spin in an iframe

If your CMS or website control panel restricts how you can embed spins, consider using an iframe. The iframe code is shown on the spins page, underneath the normal embed code.

Iframes should only be used as a last resort. They don't support fullscreen and the spin is released while dragging if dragged beyond the edge of the spin (making it less controllable).

Embed 3D spin in an iframe

Was this article helpful?

Get help from a Sirv expert

help ukraine help ukraine Powered by Ukrainian determination and British ingenuity

How can you support Ukraine