CSS rotate3d() Function

The CSS rotate3d() function is used to rotate elements in a three-dimensional space.

The 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 rotateX(60deg).

Rotate along the y Axis

This example rotates 60 degrees around the y axis. It's the equivalent of rotateY(60deg).

Rotate along the z Axis

This example rotates 60 degrees around the z axis. It's the equivalent of rotateZ(60deg).

Rotate along all Axes

This example rotates along the x, y, and z axes.

Negative Values

You can also use negative values. A negative value will rotate the element in a counter-clockwise direction.

Example:

Adding transform-origin

The default origin for the rotation is 50% 50%. You can use transform-origin to adjust the origin of the transformation:

Official Syntax

The official syntax of the rotate3d() function is as follows:

rotate3d() = rotate3d( <number> , <number> , <number> , <angle> )

Possible Values

The first three parameters describe the [x, y, z] direction vectors. The fourth parameter specifies the angle to be used. It works like this:

rotate3d(x, y, z, a)
x
A number value that describes the x-coordinate of the vector denoting the axis of rotation.
y
A number value that describes the y-coordinate of the vector denoting the axis of rotation.
z
A number value that describes the z-coordinate of the vector denoting the axis of rotation.
a

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:

deg
Degrees. There are 360 degrees in a full circle.
grad
Gradians, also known as "gons" or "grades" (although these aren't valid unit identifiers — you should still use grad as the unit identifier). There are 400 gradians in a full circle.
rad
Radians. There are 2Ï€ radians in a full circle.
deg
Turns. There is 1 turn in a full circle.

Zero Angles

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.

For example, rotate3d(0, 0, 0, 90deg) will result in no rotation being applied.

CSS Specifications

Browser Support

The following table provided by Caniuse.com shows the level of browser support for this feature.