CSS Reference Function

rotate3d()

The rotate3d() function is a 3D transform function that is used to rotate an element in three-dimensional space.

The element is rotated by an <angle> which is passed in as the fourth parameter of the function. The first three parameters specify the rotation direction, and together they form a direction vector [x, y, z] which is used to apply the rotation in the specified direction.

A positive angle value will rotate the element in the clockwise direction along the corresponding axis, and a negative value will rotate it in the counter-clockwise direction along that axis.

The clockwise direction is determined by looking at the vector starting from the end of the vector (where the pointing arrow usually is) towards the origin. The following image shows the positive (clockwise) direction of rotation along the three axes:

rotate3d
The positive direction of rotation along the three axes. Notice how if you stand at the end of each vector and look towards the origin, the clockwise rotation matches the one shown in the image.

The first three parameters of rotate3d() will specify the direction vector along which the rotation will happen, and the angle will specify the direction: clockwise along the vector or counter-clockwise.

Examples:

transform: rotate3d(1, 1, 2, 45deg);

transform: rotate3d(2, 1, 3, 33deg);

transform: rotate3d(1, 0, 0, 45deg); /* element is rotated clockwise along the x-axis by 45deg */

transform: rotate3d(0, 1, 0, 45deg); /* element is rotated clockwise along the y-axis by 45deg */

transform: rotate3d(0, 0, 1, 45deg); /* element is rotated clockwise along the z-axis by 45deg */

transform: rotate3d(0, 0, 0, 50deg); /* NO ROTATION IS APPLIED */
                

The following image shows the result of applying rotate3d(1, 1, 1, 50deg); to an image:

rotate3d-example
The result of applying rotate3d(1, 1, 1, 50deg); to an image

The official syntax looks as follows:

transform: rotate3d( <number> , <number> , <number> , <angle> );
                

For a better understanding of the transform functions, please refer to the transform entry.

Browser Support

The following is the support table for three-dimensional CSS transforms:

CSS3 3D Transforms Support

Method of transforming an element in the third dimension using the `transform` property. Includes support for the `perspective` property to set the perspective in z-space and the `backface-visibility` property to toggle display of the reverse side of a 3D-transformed element.

Current Status: W3C Working Draft

Supported from the following versions:

Desktop

  • 12*
  • 10*
  • 10
  • 15*
  • 4*

Mobile / Tablet

  • 3.2*
  • 3*
  • 37
  • 56
  • 51

* denotes prefix required.

  • Supported:
  • Yes
  • No
  • Partially
  • Polyfill

Stats from caniuse.com

Written by

Last updated December 11, 2016 at 9:37 pm by Mary Lou

Do you have a suggestion, question or want to contribute? Submit an issue.