CSS rotate3d() Function

Example

.example {
  transform: rotate3d(1, 2, -1, 192deg);
}

Hello World!

Meaning

The rotate3d() css function defines a transformation that rotates an element around a fixed axis in 3D space, without deforming it.

Note: Unlike rotations in the 2D plane, the composition of 3D rotations is usually not commutative. In other words, the order in which the rotations are applied impacts the result.

Version: CSS3

Standard Syntax

rotate3d(x, y, z, angle)

The value of rotation created by rotate3d() is specified by three numbers and one angle.

The numbers represent the x, y, and z coordinates of the vector denoting the axis of rotation.

The angle represents the angle of rotation; if positive, the movement will be clockwise; if negative, it will be counter-clockwise.

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Status

Function Arguments

The following table describes the arguments of this function.

Argument	Description
x	Describing the x-coordinate of the vector denoting the axis of rotation which could be between 0 and 1.
y	Describing the y-coordinate of the vector denoting the axis of rotation which could be between 0 and 1.
z	Describing the z-coordinate of the vector denoting the axis of rotation which could be between 0 and 1.
angle	Defines the rotation of the element. A positive angle denotes a clockwise rotation, a negative angle a counter-clockwise one.