CSS rotate3d() Function
rotate3d() function is used to rotate elements in a three-dimensional space.
rotate3d() function rotates the element along the x, y, and z axes using the angle provided as an argument.
You can specify the axis/axes of rotation using a number for the first three arguments. The fourth argument specifies the angle. You can provide the angle as any valid angle value (i.e. in degrees, gradians, radians, or turns). See
rotate() for an example of each of these values.
Rotate along the x Axis
This example rotates 60 degrees around the x axis. It's the equivalent of
Rotate along the y Axis
This example rotates 60 degrees around the y axis. It's the equivalent of
Rotate along the z Axis
This example rotates 60 degrees around the z axis. It's the equivalent of
Rotate along all Axes
This example rotates along the x, y, and z axes.
You can also use negative values. A negative value will rotate the element in a counter-clockwise direction.
The default origin for the rotation is
50% 50%. You can use
transform-origin to adjust the origin of the transformation:
The official syntax of the
rotate3d() function is as follows:
The first three parameters describe the [x, y, z] direction vectors. The fourth parameter specifies the angle to be used. It works like this:
- A number value that describes the x-coordinate of the vector denoting the axis of rotation.
- A number value that describes the y-coordinate of the vector denoting the axis of rotation.
- A number value that describes the z-coordinate of the vector denoting the axis of rotation.
An angle value that represents the angle of the rotation. A positive value results in a clockwise rotation, a negative value results in a counter-clockwise rotation.
The angle can be represented with any of the following unit identifiers:
- Degrees. There are 360 degrees in a full circle.
- Gradians, also known as "gons" or "grades" (although these aren't valid unit identifiers — you should still use
gradas the unit identifier). There are 400 gradians in a full circle.
- Radians. There are 2Ï€ radians in a full circle.
- Turns. There is 1 turn in a full circle.
The unit identifier is optional for zero angles. For example, both
rotate3d(1, 0, 0, 0deg) and
rotate3d(1, 0, 0, 0) are valid (but
rotate3d(1, 0, 0, 45) is not).
A direction vector that cannot be normalized, such as
0, 0, 0, will cause the rotation to not be applied.
rotate3d(0, 0, 0, 90deg) will result in no rotation being applied.
The following table provided by Caniuse.com shows the level of browser support for this feature.