Embrace the Awesome CSS 3D Transforms

Written by Kevin Liew on 02 May 2012
37,707 Views • Techniques

Introduction

CSS 3D Transforms have been a famous topic in web development industry. Tutorials, experimental demos and real life applications are almost everywhere! Even though it's only supported by latest webkit engine browsers (Chrome and Safari), the excitement and the coolness that brought by CSS 3D transform is simply irresistible!

As for myself, I found this new CSS3 feature fascinating because complicated 3D animation can be achieved easily with a few declaration of CSS properties, it's a good addition to your website if you like subtle animations. I have been doing research about it, a 2D person learns 3D animation, there are a few concepts, jargons and terms that confused me a lot and these tutorials and other useful resources are here to solve all the confusions by guiding and explaining it with examples and illustrations.

Alright, let's get started with the awesome CSS 3D Transforms!

  • Adventures In the Third Dimension: CSS 3D Transforms Kick start it with a tutorial from Smashing Magazine. This article explained different functions to come with CSS3 such as matrix3d, perspective, rotateX, rotateY, rotateZ, rotate3d, scaleX, scaleY, scaleZ, scale3d, translateX, translateY, translateZ, translate3d. It's a good article to grasp the basic understand of what each of function can achieve.
  • Understanding CSS 3D Transform Another in depth explanation of CSS 3D Transform with illustrated images. This tutorial come with two part, the first part explain each of the functions.
  • CSS 3D Matrix Transformation This is the part 2, a mini-series covering css 3d-transformations. I had a go and read, if you are a fan of cos, sin, matrix, you will like it. It comes with a demo with sliders so you can play with different attributes.
  • Getting you started for CSS 3D transform Getting you started for the CSS 3D transform by Mozilla Dev Derby. It's a video walkthrough to built cube 3D animation with just CSS3.
  • An attempt at Understanding CSS 3D Perspective One of the thing that confused me a lot was Perspective. To clear the confusion, this tutorial show you different view of perspective.
  • Intro to CSS 3D Transforms A detailed and well-explained tutorial by David Desandro. This CSS 3D transform tutorials come with a few example codes and demos, you will be surpised how much code you need to create stunning effects.
  • CSS 3D Transform Module If you want to learn more and keep updated about the CSS 3D transforms function, w3 website is the place to go.
  • 3D Transform tool Finally, a comprehensive tools that allow you to play with each of the functions and view the result instantly.

Consclusion

Even though CSS 3D transform is not yet mature, we all still can use it as long as we put other browsers that ain't supporting it into consideration. You can use tools such as Modernizr to detect supported browsers and it's always good to make it degrade gracefully so the pleasure of viewing your website won't be disrupted. Have fun learning CSS 3D transform!

Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.