Animated 3d objects with CSS3

Animated 3d objects with CSS3

The code in this article is written for WebKit browsers only, but you can achieve the same result with mozilla browsers by changing the css properties to their according mozilla values. As always the Internet Explorer doesn’t support all css3 standards yet.

After creating a three dimensional object with translated and rotated divs, I added an animation to the object.

Creating the 3D object

This task is simple. It’s just a bit of work to get all divs in the correct position.

At first we create the divs for all faces of the object:

. . .

its is a container containing the 3D object. iX are the faces of the object. In this case we are creating a three dimensional “I”.
The class runIT is used to start the animation later.
The following css code defines the container of the object:

		#its{
			top: 430px;
			left: 100px;
			position: absolute;
			-webkit-transform-style: preserve-3d;
		}

The interesting part of this code snipped is the property -webkit-transform-style: preserve-3d;. It defines that all child elements of this div are part of a 3D object and that all these parts are merged together for an animation.
The faces are now defined in css and are transformed to the correct position by translating and rotating them:

                      .
                      .
                      .
		#i4{
			width: 80px;
			height: 40px;
			-webkit-transform:
			translate(-20px, 100px)
			translateZ(-40px);
		}
                      .
                      .
                      .
		#i9{
			width: 40px;
			height: 40px;	
			-webkit-transform-origin: 0% 0%;
			-webkit-transform:
			translate(60px, -40px)
			rotateY(90Deg);
		}
                      .
                      .
                      .	

translate(X, Y) translated the div along the X and Y-axis by the given number of pixels. translateZ does the same for the Z-axis.
By rotateX and rotateY the div is rotated around the X and Y-axis. The parameter given defines the number of degrees for the rotation.
-webkit-transform-origin: 0% 0%; defines the origin of the rotation. 0% 0% is the upper left corner of the div. 50% 50% is the middle and 100% 100% the bottom right. First parameter defines the X and second the Y-axis.
By using this properties you can now create the object.

The animation

In addition to simple transformations (see first example in the demo), you can also create more complex animations with CSS3:

		@-webkit-keyframes itsanim{
			0%  {-webkit-transform: rotate3d(0,0,0,0Deg);}
			25% {-webkit-transform: rotate3d(-1,1,0,-45Deg);}	
			50% {-webkit-transform: rotate3d(0,-1,1,90Deg) translate(50px, -250px);}
			75% {-webkit-transform: rotate3d(1,0,1,30Deg);}
		}

@-webkit-keyframes defines the keyframes of the animation. The percents define the point in time when the given transformation should be finished.
itsanim is the name of the animation. This name is needed to identify the animation that should be started later.
You can use the same transformation already used to create the 3D object. The property rotate3d creates a rotation around a vector given by the first three parameters (X/Y/Z). The fourth parameter defines the number of degrees for the rotation.

The animation is initiated by the following code:

		.runIT{
			-webkit-animation: itsanim 6s;
		}

In my case, I integrated the code for animation initialization into a class, which is added to the container element directly. This code can also be added to the container dynamically by using JavaScript at any point in time. As soon as it is added the animation will start.
By the first parameter is the name of the animation, which we defined earlier. The second parameter is the overall time of the animation.

It is also possible to add an standard (eg. ease-in) or own acceleration function (by a Bèzier curve) to the animation, instead of the predefined linear one. This wasn’t part of my demo, but hints on that can be easily found.

Finally, here is my Demo. As mentioned earlier, it only works in WebKit browsers.

 

This page is also available in: German

Submit a Comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>