CSS Attributes Index CSS Transforms
Rotates an element around a fixed axis in 3D space.
{ transform: rotate3d( x, y, z, a ) }
| x |
a number describing the x-coordinate of the vector denoting the axis of rotation which can be a positive or negative number. |
| y |
a number describing the y-coordinate of the vector denoting the axis of rotation which can be a positive or negative number. |
| z |
a number describing the z-coordinate of the vector denoting the axis of rotation which can be a positive or negative number. |
| a |
a number representing the angle of the rotation, expressed in degrees, gradians, radians, or turns. A positive angle denotes a clockwise rotation, a negative angle a counter-clockwise one. |
The rotate3d( ) CSS function defines a transformation that rotates an element around a fixed axis in 3D space.
rotate3d( ) expects four numbers as parameters, which determine the behavior of the rotate function.
The first 3 numbers represent the x-, y-, and z-coordinates of the vector denoting the axis of rotation, while the 4th parameter represents the angle of rotation.
A positive angle denotes a clockwise rotation, while a negative angle denotes a rotation in a counter-clockwise direction.
A value of 0 in all four parameters leaves the input unchanged.
The following example demonstrates the effects of applying the rotate3d( ) function to change an element’s position in 3D space.
Show me
Notice use of a transition in the transform to better illustrate the amount of deviation from the origin.
rotate( ), rotateX( ), rotateY( ), rotateZ( )