How to create a 3D spin
A 3D spin can be rotated in any direction: left/right/up/down. It offers more than a 360 spin, which can only be rotated left/right.
3D spins give richer experiences than static images. The interaction of moving an image stimulates brain function and helps understanding.
Example using 50 images
The example to the right has 5 rows (up/down movement) and 10 columns (left/right motion). A total of 50 images were used to create it.
The majority of 3D spins have 3-4 rows and 12-18 columns, though any number of images can be used.
The bag was photographed on a turntable. Each row had 10 photos captured, spaced by 36 degrees. The camera position was then moved and another row of 10 photos captured at the new angle. This process was repeated until all 5 rows had been captured.
Uploading your 3D spin to Sirv
Follow this step-by-step guide to embed a 3D spin into the HTML of your website.
1. Choose your files names
Sirv will automatically identify your 3D spin from the file names of your images. It looks for sequences, for example:
name-rownumber-columnnumber.jpg
This is the file name of the 1st image in the 2nd row of the spinning bag above:
Bag-02-01.jpg
The screenshot below will help you visualise the 50 images that make up the example bag spin. We've marked the rows and columns:
Always put your row digits before your column digits to ensure Sirv processes 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 by either FTP, S3 or simply drag and drop them into your Sirv account in your browser.
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:
To test your new spin, select the "Preview" button:
A preview of your spin will load in a new window:
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 the "Edit" button to change the settings:
The edit window looks like this:
If you want to change the first image that appears on load, it is determined by the "Start Column" and "Start Row".
Click the value for "Start Column" (by default this says "First column"). This will reveal the column number of the first image in your spin. 1 means your spin starts with the first column image, 2 starts with the second column image etc. Enter the numbers you'd like to apply:
Click "Save" at the bottom:
5. Embed the 3D spin in a website
Sirv automatically generates the code to embed a 3D spin in a website.
Right click spin > Select "Embed" button to see the HTML code:
Click the "Copy" button to copy the JavaScript code (or highlight the code and copy using your keyboard), then paste it before the </head> tag of your web page. If you can't access that part of your page, paste the JavaScript code anywhere on your page:
Now copy the HTML code and paste it where you want the spin to appear in your web page:
Your spin will now show on your web page.
Resizing your spin
Sirv automatically generates images to fit perfectly inside the content area where you've pasted the spin. Most website layouts use <div> tags but you can paste the code inside a <table>, <span> or any other HTML tag. Wherever you've pasted it, Sirv automatically creates perfectly fitting images for that space.
Images are responsive, so if your page scales for different screen sizes or devices, Sirv will generate a different set of images to fit each screen. These are rapidly generated on demand.
To change the size of your spin, change the dimensions of the area surrounding it (the div, span, table etc.). Alternatively, add the style attribute to the Sirv div and specify the width or height.
The code below will create a spin of 600px width/height:
<div class="Sirv" data-src="https://sirv.sirv.com/website/demos/Bobble Bag/bag.spin" style="max-height:600px; max-width:600px"></div>
Embed 3D spin in an iframe
If your CMS or website control panel restricts how you can embed spins, you can consider using an iframe.
Sirv automatically creates the iframe code for your spins.
- Go to the spin and click "Embed"
- Click the "In iframe" tab.
- Copy the code and paste it into your web page.
Iframes should only be used as a last resort. They don't support full-screen spin and drag is released upon exit of the iframe boundary (making drag less controllable).