CSS Reference Function


The rotateY() function is used to rotate an element about the y-axis in three-dimensional space.

It is equivalent to:

transform: rotate3d(0, 1, 0, <angle>);

Where rotate3d() is the transformation function used to rotate an element in three-dimensional space.

It takes an <angle> as a value. The element is rotated then by the specified value about the y-axis. If the value is positive, the element is rotated in a clockwise direction, if it is negative it is rotated in a counter-clockwise direction. The clockwise direction is determined by looking at the x-axis starting from the end (where the pointing arrow usually is) towards the origin. See the rotate3d() section in the transform entry for a visual representation of the clockwise direction along the x-axis.


transform: rotateY(30deg);
transform: rotateY(-135deg);
transform: rotateY(90deg);

The following image shows the result of applying rotateY(50deg) and rotateY(-50deg) on an image:

The result of applying rotateY(50deg) and rotateY(-50deg) on an image

The official syntax looks as follows:

transform: rotateY(<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

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.

W3C Working Draft

Supported from the following versions:


  • 36
  • 16
  • 10
  • 23
  • 15

Mobile / Tablet

  • 15
  • 126
  • No
  • 126
  • 127

* denotes prefix required.

  • Supported:
  • Yes
  • No
  • Partially
  • Polyfill

Stats from caniuse.com

Written by . Last updated December 11, 2016 at 9:36 pm by Manoela Ilic.

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