CSS3 – Transforms – 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.

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

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

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.

Tags: 3D, css3, CSS3 3D, transform, transform 3D

This post was written by: Andrea Barnett

This entry was posted on Sunday, January 6th, 2013 at 7:44 pm and is filed under HTML5 and CSS3, Web Design Basics. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.

View the original article here