What CSS3 Can Do For You: Animation and 3D effects

written by aext on June 24, 2010 in Web Design and Web Development with 27 comments

As CSS3 gains more buzz, more and more developers are finding great ways to utilize it. In my last post, I went over the great ways to develop buttons and how to effectively use imagery transitions. Now we will move on and talk about the great ways to use CSS3 for animation and 3D effects.

Animation


Applying animation into your website can make the site more fun to navigate through, and make your clients happy. With that being said, Flash files can take a good amount of time to build, and could slow your loading time down. CSS3 makes it easier to animate, without the hassle of building large files.

Mouseover and Transformations

Two techniques that are quite useful and easy to manipulate are mouseover techniques and transformations. To create the transformation look below:

css3 transform

(provided by The Art of Web), you would do the following,

CSS3 Tranform Tutorial

If you would rather make this for effect for FireFox or Opera browsers, simply substitute “-webkit” for ”-moz” and or “-o”. Although, for more intricate types of animation (which we will discuss below) only webkit (Safari and Chrome) support CSS3 animation.

To enhance a transformation look, you can use a mouseover technique. This will allow you to animate a box, button, image etc to appear as though it is popping off the page, or any other type of animation. It is also helpful for opaque and other types of special images. The Art of Web goes on to show a demonstration here.

Taking these principles even a step further, and you can provide more intricate types of animation. For instance, you will be able to see a rocket move across your screen (provided you are in a CSS3 supported browser).

CSS3 Rocket Animation

Matrix

Diving a bit deeper, you will find you can do much more with the –transform command. A popular animation being featured across the web is a matrix type animation. To achieve this look, you can use the –transform command to “rotate each div to 90 degree display vertically. This way, each letter faces 90 degree angle too”. Here is the demo to see what this looks like (only webkit browsers, Safari and Chrome support this type of animation).

Check out the tutorial to see how CSS3 rotates the strings and defines the animations:

CSS3 Matrix Effect

Spinning and Rotating

Integrating CSS3 with simple Javascript can also produce great effects. To see this in action, check the link below. Note that this demo only works in webkit browsers.

CSS3 Poster Circle

To achieve this look, you will construct the three rings using, “a simple JavaScript function that creates elements and assigns them a transform that describes their position in the ring. CSS animations are then used to rotate each ring, and to spin the containing element around too. “

Using jQuery and CSS3, you can create spinning records, or any type of creative spinning object to get your visitors involved with the site.

jQuery DJ Hero

One more example of using these transitions and webkit effects is to create a clock—Javascript is only used to set the current time.

CSS Analogue Clock

3D Effects


Another of the many things CSS3 can do is creating awesome 3D effects. With movies like Avatar making a splash across the world, it’s no wonder web designers won’t try and create boxes and charts to create a 3D experience for their visitors. To create a cube like the one below—which also can rotate using your arrow keys try out the following:

CSS3 3D effect

For starters you will need six cubes to create the entire look. Each section (called a face) is then given a class and a number relating to the face. These six faces sit within a cube container—which sits in another wrapper. Click here for a full specification.

CSS3 Transforms


Implementing CSS3 transforms, “allows you to do all kinds of 2d transformations on any element on the page, by utilizing custom CSS tags. This means you can rotate and translate DOM elements, but you can also use a generic matrix function to do whatever you want.”

Once again using jQuery as a partner with CSS3, you can create a similar effect to the cover flow of iTunes.

CSS3 iTune

The creator of this effect, Paul, describes how he got this effect, “The refresh() function that updates the viewport does unlike other examples (i.e. flash coverflow scripts) not only handle single animations, but is capable of doing true half-state renderings. Right now, this is not shown too much in the demo, but it would be actually possible to change the next/prev keyboard behavior to not move from one item to the other, but render each single half-state in between.”

Charts


Combining 3D effects with animations, you can create some commanding looking charts. When creating charts with both animation and 3D effects, you can create the same 3D chart without animation using the same HTML code. The only difference between the two images is the CSS3 animation code.

Even the CSS3 code is similar, “the only difference is that we now need to rotate the ellipse, since the bars are rotated too.” Being able to create both a great looking 3D chart, and with not too much extra work add animation can give your clients a nice variety to what you can do. Below is a tutorial from Marco Kuiper, who created a 3D animated chart.

CSS3 chart

CSS3 is slowly shaping up to be very exciting. Being able to stay ahead of the curve when it comes to your business (freelance or not) can only generate more leads in the future. For now it is wise to study up on new techniques and get ready for the future of CSS.