#transform 3d

Adding on the the last tutorial about 2D Transforms: Adding a third value to our specifications, we can create a 3D effect. Unfortunately, this is not yet supported in all browsers.

Internet Explorer and Opera do not support 3D tranforms at this time, the others (Chrome, Firefox, and Safari) require prefixes -webkit-, -moz-, and -webkit-, respectively.

Rotate

This is our square rotated, as shown in the 2-D Tutorial, without an axis specified:

and is created by this CSS:

{ transform: rotate(50deg); -ms-transform: rotate(50deg); -webkit-transform: rotate(50deg); -o-transform: rotate(50deg); -moz-transform: rotate(50deg); }

This square is rotated around the Z-axis (forward-backward, adding depth):

and is created by this CSS:

{ transform: rotateZ(150deg); -webkit-transform: rotateZ(150deg); -moz-transform: rotateZ(150deg); }

And putting it all together: In addition to specifying the degree of the rotation, we also have to specify to which point on each axis we want to transform our shape to.

{ transform: rotate3d(2,-1,0.5,50deg); -webkit-transform: rotate3d(2,-1,0.5,50deg); -moz-transform: rotate3d(2,-1,0.5,50deg); }

Scale & Translate

These functions work the same way as the just discussed rotate function. So to each, we can add X, Y, Z, or all three. The angle specification (deg) is not required here. For example:

{ transform: scale3d(2,1,0.5); -webkit-transform: scale3d(2,1,0.5); -moz-transform: scale3d(2,1,0.5); }

{ transform: translate3d(110px,30px,15px); -webkit-transform: translate3d(110px,30px,15px); -moz-transform: translate3d(110px,30px,15px); }