CSS rotateY() Function
rotateY() function is used to rotate elements around the y-axis in a three-dimensional space.
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
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).
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).
You can also use negative values. A negative value will rotate the element in a counter-clockwise direction.
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.
The official syntax of the
rotateY() function is as follows:
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:
- Degrees. There are 360 degrees in a full circle.
- Gradians, also known as "gons" or "grades" (although these aren't valid unit identifiers — you should still use
gradas the unit identifier). There are 400 gradians in a full circle.
- Radians. There are 2Ï€ radians in a full circle.
- Turns. There is 1 turn in a full circle.
The unit identifier is optional for zero angles. For example, both
rotateY(0) are valid (but
rotateY(45) is not).
rotateY()function is defined in CSS Transforms Module Level 1 (W3C Working Draft)
The following table provided by Caniuse.com shows the level of browser support for this feature.