CSS rotateY() Function

The CSS rotateY() function is used to rotate elements around the y-axis in a three-dimensional space.

The rotateY() function is used in 3D-transforms. It's used with the CSS transform property to rotate an element around the y-axis. It can be used in conjunction with other rotation functions such as rotateY() and rotateZ() to rotate the element around the x and z axes if required.

These functions can also be used in place of the rotate3d() function (and vice-versa).

The rotateY() function is the equivalent of this:

Here's an example of using rotateY() to rotate an element 60 degrees around the y axis. It's the equivalent of rotate3d(0, 1, 0, 60deg).

Negative Values

You can also use negative values. A negative value will rotate the element in a counter-clockwise direction.

Example:

Note that depending on the axis the element is being rotated around, the difference between a positive angle and a negative one might not always be apparent when viewing it on the screen.

Official Syntax

The official syntax of the rotateY() function is as follows:

Possible Values

The parameter specifies the angle of the rotation. It can be any valid angle value. 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.

CSS Specifications

• The rotateY() function is defined in CSS Transforms Module Level 1 (W3C Working Draft)

Browser Support

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