The rotate() function and its derivatives.

rotate()
rotateX()
rotateY()
rotateZ()
rotate3d()

Summary of characteristics of the rotate() function

Quick description
Sets a rotation to apply to the element in 2D (in the plane of the screen).
Status
Standard
Percentages
Not applicable.
W3C Module
CSS Transforms Module
References (W3C)
Document status: CR (Candidate Recommendation)

Description of the function: rotateX(), rotateY() and rotateZ().

These three functions, used with the transform property, cause the element to rotate around one of the axes. Rotations around the Z axis keep the element in the plane of the screen (2D transformation), while rotations around of the X or Y axes are 3D transformations.

3D space is defined by three axes, X, Y, and Z, as shown below. The X and Y axes are in the plane of the screen, while the Z axis is directed towards the reader's eyes.
Circular arrows indicate the direction of rotation for a positive angle value.

Axes for the rotate3d() function

Description if the rotate() function.

The rotate() function is exactly equivalent to rotateZ(): it defines a rotation around the Z axis, i.e. in the plane of the screen (2D transformation).

Description of the rotate3d() function.

rotate3d() calculates a rotation in the 3D plane. This rotation can then be applied to an element by the transform property.

rotate3d() is not a simple shorthand for the other three rotation functions because it allows you to define a rotation axis other than one of the three standard axes.

Axes for rotate3d() function

rotate3d() can however replace the three elementary rotation functions rotateX(),rotateY() and rotateZ(), at the cost of a slight complication of the syntax for writing parameters.

Note: In order for the rotations around the X and Y axes to be visible, you must also apply an effect of perspective() otherwise the element seems simply crushed.
To do this, we use the perspective() function so that the rotation is perceived as such, and not as a simple crushing of the element. Example:

transform: perspective(50px) rotate3d(1, 0.5, 1, 45deg);

These rotation functions can be used with:

  • transform : Applies one or more geometric transformations (rotations, enlargements, etc.).

Rotation Function Syntax.

  • transform: rotateX(45deg); transform: rotateY(45deg); transform: rotateZ(45deg); transform: rotate(45deg);

    These four functions have an identical syntax: a value is expected followed by an angular unit (see CSS angle units). This value can be positive or negative.

    rotate() is equivalent to rotateZ().


    X-axis rotation

    Y-axis rotation

    Z-axis rotation

Syntaxe de la fonction rotate3d().

  • transform: rotate3d(1, 0, 0, 45deg); x y z a

    x, y, and z are three unitless values. They define the axis of rotation.
    For rotation around the X axis: rotate3d(1,0,0,a)
    Around the Y-axis : rotate3d(0,1,0,a)
    And around the Z axis: rotate3d(0,0,1,a)
    But all combinations and intermediate values are possible. The diagram below shows something like rotate(1, 0.25, 0.4, a)

    Definition of the axis of rotation for rotate3d()

    a is a positive, negative, or zero numeric value, followed by a unit of angle (see CSS angle units). This value of course defines the angle of rotation about the axis defined by the first three values.

    Rotation along a combination of the three axes.
    transform:perspective(50px) rotate(5, 7, 1, 20deg);

Simulator.

Note: The simulator also uses the perspective() function to make rotations easier to visualize.

transform :
Résultat

Browser compatibility and support.

2D or 3D transformations are perfectly handled by all current browsers.

Column 1
General support for 2D transformations, including rotations, element translations, and more
Column 2
General support for 3D animations, including support for perspective management and support for the backface-visibility property.
Column 3
Support for the rotateX() function used with the transform property to define a rotation around the X-axis.
Column 4
Support for the rotateY() function used with the transform property to define a rotation around the y-axis.
Column 5
Support for the rotateZ() function used with the transform property to define a rotation around the Z-axis.
Column 6
Support for the rotate3d() function used with the transform property, to set a rotation around any axis.

Notes:

(1) Does not support 2D transformations on SVG elements. Use the transform attribute instead.

(2) Internet Explorer does not support transform-style:preserve-3d, thus limiting the nesting of animations.

1
2D
transformations
2
3D
transformations
3
rotateX()
function
4
rotateY()
function
5
rotateZ()
function
6
rotate3D()
function
Estimated overall support.
97%
97%
96%
96%
96%
96%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

1
2

KaiOS Browser

Opéra Mobile

Opéra

Firefox pour Androïd

Samsung Internet

Chrome

Edge

Firefox

Androïd Brower

Chrome pour Androïd

Baidu Browser

QQ Browser

Safari

Safari sur IOS

UC Browser pour Androïd

Opéra mini

See Caniuse.com for more compatibility information.
Caniuse
Caniuse
Caniuse
Caniuse
Caniuse
Caniuse

Historic of rotation functions.

  • CSS Transforms Module Level 1

    First level of specification concerning 2D transformations.
    Presentation of different transformation functions such as rotate().
    WD
    February 28, 2012
    Working Draft.
    CR
    February 14, 2019
    Candidate Recommendation.
    PR
    REC

  • CSS Transforms Module Level 2

    The level 2 of the Transforms specification introduces 3D transformations.
    Adding new rotation functions: rotateX(), rotateY(), rotateZ() and rotate3d() .
    No change directly affecting the rotate() function.
    WD
    March 03, 2020
    Working Draft.
    CR
    PR
    REC

See also, concerning transformations.

The CSS Transforms Module includes all the properties and functions related to CSS transformations:

Properties:

backface-visibility
Visibility of the rear side of the element (while it is rotating).
perspective
Langue française
A perspective effect applied to a 3D transformed element.
perspective-origin
Langue française
Position of the observer in the case of a 3D distortion with perspective.
rotate
Defines a rotation to apply to the element.
scale
Sets a scaling of the element (magnification or shrinking).
transform
Applies one or more geometric transformations (rotations, enlargements, etc.).
transform-box
Langue française
Sets the reference box for transformations.
transform-origin
Langue française
Sets the origin point for transformations.
transform-style
Langue française
Defines how elements that undergo a 3D transformation are rendered.
translate
Applies a translation to an element (a linear displacement).

Functions:

matrix()
Applies a composite transformation to an element (translations, rotations...).
matrix3d()
Langue française
Applies a series of 3D transformations to an element.
perspective()
Langue française
Sets the height of the observer in the case of a 3D transformation.
rotate3d()
Defines a 3D rotation to be applied to an element around any axis in 3D.
rotateX()
Defines a rotation of the element around the X-axis (in 3D),
rotateY()
Sets a 3D rotation of the element around the y-axis.
rotateZ()
Sets a rotation of the element around the z-axis.
scale()
Sets a magnification or reduction of the element.
scale3d()
Sets 3D scaling.
scaleX()
Sets X-axis scaling.
scaleY()
Set Y-axis scaling.
scaleZ()
Set Z-axis scaling.
skew()
Sets a tilt of the element along the X and/or Y axes.
skewX()
Sets a tilt of the element along the X-axis.
skewY()
Sets a tilt of the element along the Y-axis.
translate()
Defines a translation (a linear move) to an element.
translate3d()
Defines a 3D translation along one or more of the X, Y, and Z axes.
translateX()
Defines a translation along the X-axis (horizontally).
translateY()
Defines a translation along the Y axis (vertically).
translateZ()
Defines a translation along the Z axis (perpendicular to the screen).