CSS rotate3d() Function
transform: rotate3d(1, 2, -1, 192deg);
The rotate3d() css function defines a transformation that rotates an element around a fixed axis in 3D space, without deforming it.
Note: Unlike rotations in the 2D plane, the composition of 3D rotations is usually not commutative. In other words, the order in which the rotations are applied impacts the result.
rotate3d(x, y, z, angle)
The value of rotation created by rotate3d() is specified by three numbers and one angle.
The numbers represent the x, y, and z coordinates of the vector denoting the axis of rotation.
The angle represents the angle of rotation; if positive, the movement will be clockwise; if negative, it will be counter-clockwise.
The numbers in the table specify the first browser version that fully supports the property.
The following table describes the arguments of this function.
|Describing the x-coordinate of the vector denoting the axis of rotation which could be between 0 and 1.
|Describing the y-coordinate of the vector denoting the axis of rotation which could be between 0 and 1.
|Describing the z-coordinate of the vector denoting the axis of rotation which could be between 0 and 1.
|Defines the rotation of the element. A positive angle denotes a clockwise rotation, a negative angle a counter-clockwise one.