CSS 3D Transforms

Authors

  • Evan Sell
  • Robert Colvin

CSS allows you to format your elements using 3D transformations. This allows you to change the position, scale, orientation, and perspective of elements on your page.

Rotate X( ) Method

The rotateX() method rotates an element around its X-axis at a given degree:

Mercer Bear
Mercer Bear

Rotate Y( ) Method

The rotateY() method rotates an element around its Y-axis at a given degree:

Mercer Bear Statue
Mercer Bear Statue

Rotate Z ( ) Method

The rotateZ() method rotates an element around its Z-axis at a given degree:

Mercer Bear Logo
Mercer Bear Logo



Scale3d( ) Method

The scale3d() method takes 3 values and scales an element by that value about its corresponding X, Y, or Z axis (scaleX(), scaleY(), and scaleZ() each scale about a single axis):

Silly Bear
Silly Bear but bigger



Translate3d( ) Method

The translate3d() method takes 3 values and translates an element by that value about its corresponding X, Y, or Z axis (translate(), translateY(), and translateZ() each translate about a single axis):

Mercer Bear
Mercer Bear



Perspective( ) Method

The perspective() method defines the perspective of a 3d element based on a given value:

Mercer Bear
Mercer Bear

Doesn't do much in this case

Note: Internet Explorer 9 (and earlier versions) does not support the rotateX() method.