What CSS3 Can Do For You: Animation and 3D effects
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.
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:
(provided by The Art of Web), you would do the following,
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).
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:
Spinning and Rotating
Using jQuery and CSS3, you can create spinning records, or any type of creative spinning object to get your visitors involved with the site.
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:
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.
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.
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.”
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 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.