# 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:

## 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:

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.
`turn`
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.

## Browser Support

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