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
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
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,
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:
- transform : Applies a transformation to an element.
- transform-origin : On transformed elements, it allows to change the position.
- transform-style : Specifies rendering of nested elements in 3D space.
- perspective : Specifies the view for 3D elements
- perspective-origin : Specifies the bottom position of 3D elements
- backface-visibility : Defines visibility of an element when not facing the screen