Tuesday, June 5, 2012

CSS3 3D Transform Basics

3D transforms in CSS3 are just plain fun and easy. A transform represents a series of functions that you can apply to manipulate an HTML element in 3D space, and they include the following:

  • Translation
  • Scaling
  • Rotation

Let's take a look at each one!

Note: Presently, CSS3 3D transforms are still in working draft status, and IE9 doesn't support it yet. So bust out yo' Firefox or WebKit and let's get it on!


Translation is a fancy way of saying "move that". For example, if you call translateX(100px) on an element, you'll move it 100px to the right (assuming it's positioned at zero on the Z axis). Hover over this image to see an example of translating along the X axis:


You can think of scaling as stretching. By increasing the X scale, you'll cause the element to stretch along the X axis. And by increasing the Y scale, you'll cause it to stretch along the Y axis. Since we're talking about flat HTML elements, here, calling Z won't help you too much unless you've already rotated the element. Hover over this image to see an example of stretching along the X axis:


Rotation causes the element to spin in a certain direction. Keep in mind that the property name reflects the axis around which the element rotates. So using rotateY() causes the element to rotate around the vertical axis. Hover over this image to see an example of rotating around the Y axis:

Combining Functions

Now, in order to do anything more than "nominally cool" with this, we've got to combine the functions. Stay tuned for the next article, where we'll explore the different ways you can put these functions together!

No comments:

Post a Comment

Profile Picture
Dave Leeds
My Hobbies:
  • Programming
  • Cartooning
  • Music Writing
Full Profile