CSS 3D Transforms

CSS3 provides the facility to change shape, size, and position of the element with the help of transform property. There are two types of transformations namely, 2D and 3D.

Transformation allows to rotate, translate, shift and scale elements.

In this, we will learn about only 3D transformation.

In the 3D transformation, the effects are produced with the help of x-axis (horizontal effects), y-axis (vertical effects) and z-axis (depth effects).

The list of 3D transformations methods are as follows:

Translate

translate3d(x,y,z) – This method transforms the element along x-axis, y-axis and z-axis.

It takes the values as lengths and percentages. The default value is 0.

Rotate

rotate3d(x,y,z,angle)  –  This method rotates the element at a given angle along the axis of rotation defined by an (x, y, z) vector.

The default value is 0. The positive value represents clockwise rotation and the negative value represents anti-clockwise direction.

Scale

scale3d(x,y,z) – This method changes the size of the element as specified for x, y and z-axis respectively.

By default, the element is at scale 1, no change. The element gets scaled up for the values greater than 1 and for negative values, the transformation is flipped in either direction.

The element gets disappeared if the value is zero.

Matrix

The matrix3d function is a replacement to the 3D transform methods rotate3d, rotateX, rotateY, rotateZ, translate3d, translateZ, scale3d, scaleZ, and perspective.

It takes a 4×4 matrix of 16 values as a parameter.

Perspective

This method defines a 3D space for a 3D-transformed element.  perspective(n)

Following are the transform properties supported in 3D transformations:

1. transform : Applies a transformation to an element.
2. transform-origin : On transformed elements, it allows to change the position.
3. transform-style : Specifies rendering of nested elements in 3D space.
4. perspective : Specifies the view for 3D elements
5. perspective-origin : Specifies the bottom position of 3D elements
6. backface-visibility : Defines visibility of an element when not facing the screen