Html Code For 3d Animation

3D Transforms were first implemented by the Safari/WebKit team ages ago. Support in other browsers is still variable, but getting better.

CSS Text Effects CSS Web Fonts CSS 2D Transforms CSS 3D Transforms CSS Transitions CSS Animations CSS Tooltips CSS Style Images CSS object-fit CSS Buttons CSS Pagination CSS Multiple Columns CSS User Interface CSS Variables CSS Box Sizing CSS Flexbox CSS Media Queries CSS MQ Examples. CSS: 3D Transforms and Animations Tweet 4 Shares 0 Tweets 24 Comments. 3D Transforms were first implemented by the Safari/WebKit team ages ago. Support in other browsers is still variable, but getting better.

In this article you will learn how to create an object and add 3D animation to it. Here we will make use of JavaScript and some different styles along with HTML code. Just go through the steps to learn how to create this application.

CSS3 animation and 2D transforms have been implemented in Safari, Firefox, Opera and even Internet Explorer 10, but in this article we're taking it a step further using keyframes to set up perpetual animation effects in 3D space.

These effects will work in WebKit (Safari/iPhone/iPad and Chrome) and Mozilla (Firefox) browsers. Some simpler effects will work in Internet Explorer 10, but they don's support the preserve-3d setting needed for proper 3D layouts.

Setting up Keyframes

What are keyframes?

A @-webkit-keyframes block contains rule sets called keyframes. A keyframe defines the style that will be applied for that moment within the animation. The animation engine will smoothly interpolate style between the keyframes.

While this may sound complicated, and can be, we're starting with one of the most simple examples. The keyframes block defined here will simply rotate an element or group of elements counter-clockwise around the Y-axis (which points towards the top of the page):

<style type='text/css'> /* WebKit and Opera browsers */ @-webkit-keyframes spinner { from { -webkit-transform: rotateY(0deg); } to { -webkit-transform: rotateY(-360deg); } } /* all other browsers */ @keyframes spinner { from { -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); transform: rotateY(0deg); } to { -moz-transform: rotateY(-360deg); -ms-transform: rotateY(-360deg); transform: rotateY(-360deg); } }</style>

In this example the keyframe has been assigned the name 'spinner' for later reference. Additional steps, between 'from' and 'to', can be inserted, each one using a percentage value instead of the from/to keywords, and they can contain different types of styles and transformations. Can you play xbox on a macbook pro.

Setting the stage for our animation

The 'stage' is the element in which our animation takes place. The animation will move and rotate in relation to the stage element, which itself remains fixed to the page.

The optional perspective attribute defines how extreme the 3D effect will be as elements move up and down the Z-axis (come out of the page). The larger this distance the less obvious the effect. Without this attribute there is no perspective effect at all.

<style type='text/css'> #stage { margin: 1em auto; -webkit-perspective: 1200px; -moz-perspective: 1200px; -ms-perspective: 1200px; perspective: 1200px; }</style>

The next element is the one to which the animation is applied. We do this by referring to the keyframes by name. We also define a transition timing function and set the number of iterations (or infinite in this case for perpetual motion). Each iteration will last 6 seconds.

You can assign different timing functions for each individual keyframe in the block if you want to create more physically realistic animations.

<style type='text/css'> #spinner { -webkit-animation-name: spinner; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -webkit-animation-duration: 6s; animation-name: spinner; animation-timing-function: linear; animation-iteration-count: infinite; animation-duration: 6s; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; } #spinner:hover { -webkit-animation-play-state: paused; animation-play-state: paused; }</style>

The hover effect will pause the animation when the mouse is over the element. This property can also be toggled between 'running' and 'paused' using JavaScript to control the state of the animation.

The preserve-3d setting is important if you want to be able to transform other elements with relation to this one, which we do. Without this all child elements are rendered flat in the same plane.

Prior to Chrome 12.0 neither the perspective nor preserve-3d attribute was recognised so the 3D animations where all 'flattened'. This has been addressed for later versions, but preserve-3d is still missing as of Internet Explorer 11.

One interesting effect can be achieved by setting the timing functionto 'ease-in-out' and adding a new property -webkit-animation-direction: alternate;. This will result in an animation that spins first one way and then the other.

Spinning an element on the page

At this point we already have all the ingredients required to place an element on the page and set it spinning, as you can see here:

Stop, I'm getting dizzy!

<div><p>Stop, I'm getting dizzy!</p></div>

Both the 'stage' and the paragraph have been assigned a semi-transparent background so you can see the 3D effect as the paragraph rotates. By default the rotation axis is the centre of the 'stage' element, but that can be moved by setting the transform-origin attribute away from the centre.

Creating a photo carousel

As a demonstration, we're now going to build a 'carousel' of images rotating around the vertical axis - similar to a slide projector. In addition to the above styles, we now assign position: absolute to each image child of the spinner element, and some formatting:

<style type='text/css'> #spinner img { position: absolute; border: 1px solid #ccc; background: rgba(255,255,255,0.8); box-shadow: inset 0 0 20px rgba(0,0,0,0.2); }</style>

If you also set -webkit-backface-visibility: hidden; on the img elements then any facing away from the screen will be hidden rather than displayed in reverse, leaving you with just half the animation.

You can download all the required styles here: 3d-transforms.css

Finally, here's the HTML markup for five randomly selected photos:

<div><div><img src='images/beach1.jpg' width='200' height='160' alt='><img src='images/beach2.jpg' width='213' height='160' alt='><img src='images/beach3.jpg' width='240' height='160' alt='><img src='images/beach4.jpg' width='213' height='160' alt='><img src='images/beach5.jpg' width='238' height='160' alt='></div></div>

To make things easier to start with, all the images have the same height, so we just needed to adjust the padding on the inside edge to have them join up at the central axis. If the heights vary you also need vertical padding. You can do away with the padding altogether if you want, but it becomes more useful as more images are added.

And here's the final product!

The result in Safari 5 looks something like the snapshot below, with the photo on the right coming towards you and the others moving away.

Internet Explorer 10 and 11 still do not support the preserve-3d property so the result is flattened rather than three-dimensional.

The whole construction is rotating a full circle every 6 seconds. There is some transparency in the white inner section letting you see parts of photos in the background:

It may look complicated, but luckily for you we've written a short PHP script to set up a spinning carousel for any number of images:

<?PHP // Original PHP code by Chirp Internet: www.chirp.com.au // Please acknowledge use of this code by including this header. $size = array(); $rotation = $maxw = $maxh = 0; // identify images to display $dirlist = glob('images/beach*.jpg'); $num = count($dirlist); // calculate the largest image dimensions for($i=0; $i < $num; $i++) { $img = $dirlist[$i]; $size[$i] = getimagesize($img); if($size[$i][0] > $maxw) $maxw = $size[$i][0]; if($size[$i][1] > $maxh) $maxh = $size[$i][1]; } // display the carousel html echo '<div id='stage' style='padding-left: ',($maxw*3/4),'px; height: {$maxh}px;'>n'; echo '<div id='spinner' style='-webkit-transform-origin: ',($maxw*3/4),'px 0 0;'>n'; for($i=0; $i < $num; $i++) { $img = $dirlist[$i]; $padleft = ($maxw - $size[$i][0]); $padh = ($maxh - $size[$i][1]) / 2; echo '<img style='-webkit-transform: rotateY(-',round($rotation,1),'deg) translateX(',($maxw*3/4),'px); padding: {$padh}px 0 {$padh}px ',($padleft + $maxw/2),'px;' src='$img' {$size[$i][3]} alt='>n'; $rotation += 360 / $num; } echo '</div>n'; echo '</div>nn';?>

This code sets the padding at the centre of the carousel to half the width of the widest image. It should work for any number of images.

Photos on a rotating polygon

With the exact same style settings, and only a few changes to the code, we have have the same photos displaying on the outside of a rotating polygonal column:

All that has changed is the last section of code, which has been replaced with the following:

<?PHP // display the rotating polygon $radius = floor($maxw / (2 * tan(deg2rad(180/$num)))); echo '<div id='stage' style='width: {$maxw}px; height: {$maxh}px;'>n'; echo '<div id='spinner'>n'; for($i=0; $i < $num; $i++) { $img = $dirlist[$i]; $padw = ($maxw - $size[$i][0]) / 2; $padh = ($maxh - $size[$i][1]) / 2; echo '<img style='-webkit-transform: rotateY(',round($rotation, 1),'deg) translateZ({$radius}px); padding: {$padh}px {$padw}px;' src='$img' {$size[$i][3]} alt='>'; $rotation += 360 / $num; } echo '</div>n'; echo '</div>n';?>

For non-supported browsers, here is a snapshot:

Again, this code will scale up (or down) for any number of photos, though the width of the rotating structure increases rapidly for larger numbers. You can find a much nicer solution here.

For a larger set of images, I would suggest loading only a small number to start with, and then use JavaScript to replace images as they rotate out with new ones from the queue.

Tweaking the keyframes timing

As mentioned above, using different transition timing functions can make the animation more appealing. The problem is that it's difficult to set up unless you know exactly how many elements you're dealing with.

For this example, we're going to re-use the above example, which we know has five sides, and set up a keyframe to display them to best effect. We've called the new keyframes spinner5 because it's optimised for display five sides in sequence:

<style type='text/css'> @-webkit-keyframes spinner5 { from,15% { -webkit-transform: rotateY(0deg); } 20%,35% { -webkit-transform: rotateY(-72deg); } 40%,55% { -webkit-transform: rotateY(-144deg); } 60%,75% { -webkit-transform: rotateY(-216deg); } 80%,95% { -webkit-transform: rotateY(-288deg); } to { -webkit-transform: rotateY(-360deg); } } @keyframes spinner5 { from,15% { -moz-transform: rotateY(0); -ms-transform: rotateY(0); transform: rotateY(0); } 20%,35% { -moz-transform: rotateY(-72deg); -ms-transform: rotateY(-72deg); transform: rotateY(-72deg); } 40%,55% { -moz-transform: rotateY(-144deg); -ms-transform: rotateY(-144deg); transform: rotateY(-144deg); } 60%,75% { -moz-transform: rotateY(-216deg); -ms-transform: rotateY(-216deg); transform: rotateY(-216deg); } 80%,95% { -moz-transform: rotateY(-288deg); -ms-transform: rotateY(-288deg); transform: rotateY(-288deg); } to { -moz-transform: rotateY(-360deg); -ms-transform: rotateY(-360deg); transform: rotateY(-360deg); } }</style>

We then need to modify the style settings for the 'spinner' to reference the new keyframes and to make some changes to the timing and duration:

<style type='text/css'> #spinner { -webkit-animation-name: spinner5; -webkit-animation-timing-function: ease-out; -webkit-animation-iteration-count: infinite; -webkit-animation-duration: 20s; animation-name: spinner5; animation-timing-function: ease-out; animation-iteration-count: infinite; animation-duration: 20s; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; }</style>

The result, which you see here, is much more user-friendly. During each 20-second iteration, each photo is displayed still for 3 seconds, followed by a rotation to the next face which takes only 1 second.

The difficulty in setting this up for any number of photos is that keyframes only allows percentage and not fractional settings, so some of the values would need to be approximated. Also we need to add a new keyframe for each photo added.

Rotating cube

One last example, a bit more complex that the previous which just involved rotations around one axis. Here we set up a cube with six faces that rotate in order.

We start by using CSS to style and place the six faces of the cube. Each side will be marked up as a div child of the 'spinner' element:

<style type='text/css'> #spinner div { position: absolute; width: 120px; height: 120px; border: 1px solid #ccc; background: rgba(255,255,255,0.8); box-shadow: inset 0 0 20px rgba(0,0,0,0.2); text-align: center; line-height: 120px; font-size: 100px; } #spinner .face1 { -webkit-transform: translateZ(60px); } #spinner .face2 { -webkit-transform: rotateY(90deg) translateZ(60px); } #spinner .face3 { -webkit-transform: rotateY(90deg) rotateX(90deg) translateZ(60px); } #spinner .face4 { -webkit-transform: rotateY(180deg) rotateZ(90deg) translateZ(60px); } #spinner .face5 { -webkit-transform: rotateY(-90deg) rotateZ(90deg) translateZ(60px); } #spinner .face6 { -webkit-transform: rotateX(-90deg) translateZ(60px); }</style>

If you don't want to see the backs of images in the background you can also set -webkit-backface-visibility: hidden; on the face elements.

Then we set up a keyframe animation sequence to rotate the cube to that each face is presented to the front in order:

<style type='text/css'> @-webkit-keyframes spincube { from,to { -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); } 16% { -webkit-transform: rotateY(-90deg); } 33% { -webkit-transform: rotateY(-90deg) rotateZ(90deg); } 50% { -webkit-transform: rotateY(-180deg) rotateZ(90deg); } 66% { -webkit-transform: rotateY(90deg) rotateX(90deg); } 83% { -webkit-transform: rotateX(90deg); } } #spinner { -webkit-animation-name: spincube; -webkit-animation-timing-function: ease-in-out; -webkit-animation-iteration-count: infinite; -webkit-animation-duration: 12s; -webkit-transform-style: preserve-3d; -webkit-transform-origin: 60px 60px 0; }</style>

The HTML markup is fairly simple:

<div><div><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div></div></div>

Html Code For 3d Animation Softwares

To have the animation working in Firefox you just need to substitute -moz- for -webkit- in the above styles. Using -ms- will have some effect in Internet Explorer 10, but you will see only a flattened version of the cube.

Each rotation will take place over 2 seconds. Here's the result:

Animation 3d Free

Here you can find a standalone example of the cube, and copy the complete HTML and CSS code which should work in Safari, Chrome, Firefox and Opera:

Html Code For 3d Animation 3d

Finally, some screen grabs for non-supported browsers:

> >

On each face you have have any HTML content you want, including (selectable) text, images, (clickable) links, or video content. You could even use a similar effect to refresh content for the entire page.

If you do find any good uses for these examples, please let us know using the Feedback form below.

Huntermodels964

Html Code For 3d Animation

Setting up Keyframes

Setting the stage for our animation

Spinning an element on the page

Creating a photo carousel

Photos on a rotating polygon

Tweaking the keyframes timing

Rotating cube

Html Code For 3d Animation Softwares

Animation 3d Free

Html Code For 3d Animation 3d

Free 3d Animation Website

References

Related Articles - Transforms and Transitions

Send a message to The Art of Web:

Html Code For Single Quote

User Comments

Html Code For Forward Slash