CSS 3D Transformations

You have already learned about 2D transformations and Gradients, so now its time to head towards 3D transformations in CSS.

What makes an object 3D? The inclusion of the z-axis, that's correct! Well 2D and 3D transformations are almost similar except that the 3D transformations have more methods due to an additional z-axis.

All the methods that you learnt for 2D transformations are also valid for 3D transitions but they have different names. Checkout the table below.

Apart from the usual 2D methods, CSS3 provides us with the following functions:

• translateZ(z)
• scaleZ(z)
• rotateZ(z)
• rotateZ(z)

And a new property called backface-visibility.

perspective

This property defines the number of pixels a 3D element is placed from the view. This property allows you to change the perspective on how 3D elements are viewed.

Note: When defining the perspective property for an element, it is the CHILD elements that get the perspective view, and NOT the element itself.

This function is only available for 3D transformations.

div {
    -webkit-perspective: 250px;     /* for OLDER versions */
    perspective: 250px;
}

backface-visibility

This property defines whether or not an element should be visible when not facing the screen. This property is useful when an element is rotated, and you do not want to see the element’s backside.

Syntax:

backface-visibility: visible | hidden | initial | inherit;

For Example,

div {
    -webkit-backface-visibility: hidden; /* OLDER VERSIONS */
    backface-visibility: hidden;
}

All the rest of the properties(except skew) that apply to 2D transformations also remain true for 3D transformations.