CSS3 3D Transforms

The advent of CSS3 3D Transforms allows you to create some cool 3D effects within browsers that support the specification. We’ll look at some code examples, some sites where you can test out the process for yourself and conclude the article with some reference material.

To begin with, here are a couple of tables that show you the CSS 3D transform properties and the 3D transform methods as seen on w3schools.com.

On this site are a couple of tutorials designed to get you up to speed with the basics of these transforms. These allow yout to experiment with the code and test it on this page. The only problem was, it didn’t work. Undaunted, I used the code in blank documents in Adobe Dreamweaver. I used the browser preview with Firefox 16.0.2, Google Chrome and Safari. In every case the code wouldn’t work in any of the browsers.

To attempt to discover what was wrong, I headed over to the Mozilla Developer Network site and tested the code with Adobe Dreamweaver and the browser preview. This code wouldn’t execute, either.

Thinking that the issue might be a display issue with Dreamweaver, I uploaded files from the above sections into my hosting account. I tested the code in Firefox, Safari and Google Chrome. In every case the code wouldn’t execute. My screens were frozen. And while there were samples (and the ability to test them) on the Mozilla site, they didn’t work, either.

The only code that worked was on this page, where you can test out a 3D and 3D transform. It wouldn’t work anywhere else. Also, the results were inconsistent. Sometimes the transforms would work; other times not. Refreshing the browser seemed to do the trick.

One site which offered code that did work (on their site and in Adobe Dreamweaver) is HTML5 Rocks. You can test the examples our for yourself.

To obtain a deeper understanding of CSS3 3D Tranforms, read this article.

I also recommend that you check out 3D CSS Tester. On this page you’ll see a rotating logo stack, along with a set of controls on the right. These will allow you t get a feeling for how things work in 3D space. Still, this won’t be enough of an explanation so I recommend that you watch the video at the bottom of this page. This will give you a bette idea of how CSS3 3D Transforms function.

Kudo’s to Chris Heilmann for creating this great demo.

CSS 3D Transforms in Action

In this section are demos of CSS3 3D Transforms in action.

One of these is a rotating cube. You can see it in action here.

Some great demonstrations of what you can do with CSS3 3D Transforms is on the CSS 3D transformations in Firefox Nightly web site. Here you’ll see a few demo’s of 3D Transforms in action.

The first demo is a 3D HTML5 Logo. You can manipulate the X, Y and Z axes of rotation and apply that to the logo. When it starts to spin, be ready for some wild rotations.

The next demo on this page is the Poster Circle. According to the notes on this page, the three rings are built from a JavaScript function which creates elements, and assigns a transform which defines their position on the ring. Using CSS animations, each frame is rotated.

While this was written for Webkit and Firefox Nightly, I tested it in Google Chrome and it worked, including the ability to click on the numbered squares. It’s a bit tricky though and you’ll see what I mean when you try it out yourself.

In the comments on this site is another example, another example. When I tested it in the latest version of Firefox (16.0.2) I received the following error: “Unfortunately, either your web browser or your graphics card doesn’t support WebGL. We recommend you try it again with Google Chrome.”

Testing it in Google Chrome produced an entirely different result. This time the page was interactive and the animation was pretty impressive.

Conclusion

While CSS3 3D Transforms offer a wide variety of options, the specification isn’t perfect, as you can see. Still, the results are promising and the developers will work out the bugs over time.

For Further Reading

• Have a look at the CSS 3D Transforms specification.