Transforming Elements in 3D Using CSS3

With CSS3, you can apply animated effects on Web page elements in 3D as well as 2D.

In this tutorial we will go through the basics of rotating in 3 dimensions and will combine these transforms with the scale and translate transforms for more complex results. We will also add a basic level of interaction to animate the effects as the user interacts with the page.

The click listener JavaScript function is purely for demonstration, so that you can see the effect as it happens. In your own pages you will of course need to incorporate the transform effects with any other functionality you have in place.

Style the Page

Add the following CSS code in the style section to apply default styling to your image element:

We apply a margin of 50px to accommodate the image as it rotates, but depending on the size of your own image, you may wish to alter this. When the user clicks the image, the browser will apply the 3D transform. To make this happen gradually so that you can see the effect unfold, we apply these transition properties making it last two seconds.

Notice the prefixes used in addition to the standard transition syntax – you will also see this throughout the transform code. The 3D transforms are not yet supported in Internet Explorer or Opera, so our CSS prefixes only need to accommodate Firefox, Safari and Chrome.

Rotate the Image

You can rotate your image element with a 3D effect by specifying the X, Y or Z axis. To start with, let’s use the X axis by adding the following CSS code:

Combine Effects

In most practical cases, you will use transform effects in conjunction with other effects rather than in isolation. When you use more than one transform, the effects combine to make varied results. These results depend on the order in which you supply the transforms in your CSS code. The best way to familiarize yourself with these is to experiment with them, so we will run through a few combinations to get you started. View your page in the browser each time you alter the CSS.

Add a Translation Effect

Alter your CSS code to include a translation after the rotation transform, starting with the X axis as follows:

Notice that in this case, the translation applies to the rotation effect itself rather than just the element in terms of its final position in the page. The translation alters the way in which the rotation unfolds, moving the image down the page while it rotates, but then returning it to the same point on the X and Y axes.

Add a Scaling Effect

Next let’s combine the 3D rotation with scaling effects. Alter your code as follows, rotating on the X axis while scaling on both X and Y:

Conclusion

In this tutorial we have tried a few combinations of 3D transforms in CSS3. As mentioned above, these effects can create potentially very complex results, particularly when used with multiple image resources. Developers are using these techniques to create sophisticated 3D images and animations. If you are experimenting with these effects on live sites, do remember the still very low level of browser support.

Sue Smith works as a Web/ software developer and technical writer based in the UK: see benormal.info for details. Sue has written for various clients including Smashing Magazine and Mobiletuts+. She also does a little Android development and some comedy writing.

http://www.arterruption.net/ Saya

I liked it very simple and nice- If you suggest any other tutorial please let me know