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.

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);
}

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.