Abakada: Back to Basics > Language References > CSS Properties > Transform Functions > rotate3d( ) Transform Function
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.
rotate3d( ) in most cases is implemented with a transition to better illustrate the gradual transformation, unless an instantaneous or fixed change is desired, like when presenting flip horizontal or flip vertical effects.
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.
For a brief overview, please see Understanding and Using CSS Transforms.
rotate( ), rotateX( ), rotateY( ), rotateZ( )