More Web Design Tutorials

CSS3 – Transforms – 3D

January 6, 2013

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.


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

A 2-D 50-degree rotation

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):

A 150-degree rotation around the Z-Axis

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);
A 50-degree rotation along all 3 axes

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);
A container scaled by 2, 1, and 0.5 along the x, y, and z-axis, respectively
transform: translate3d(110px,30px,15px);
-webkit-transform: translate3d(110px,30px,15px);
-moz-transform: translate3d(110px,30px,15px);
A container transformed by 110, 30, and 15px along the X, Y, and Z axis, respectively.

You’ll notice that the ‘Z’ directive doesn’t seem to have any effect here. Since we’re viewing on a ‘flat’ display, this move won’t be apparent unless demonstrated in relation to another object. Then we can see this much like with z-index.

If you have any questions about this tutorial or run into trouble trying it yourself, post your question/problem in the Killersites Forum for help.