CSS Attributes Index CSS Transforms
Rotates an element around its vertical axis.
{ transform: rotateY( angle ) }
| angle |
Floating point number representing an angle value expressed in degrees, gradians, radians, or turns. |
The rotateY( ) CSS function defines a transformation that rotates an element around its vertical axis.
NOTE: rotateY( a ) is equivalent to rotate3d( 0, 1, 0, a ).
The fixed point that the element rotates around, also known as the transform origin, defaults to the center of the element, but can be set using the transform-origin property.
The passed parameter defines the amount of deviation from the element’s vertical axis origin.
A value of 0 leaves the input unchanged.
If positive, the movement will be clockwise; if negative, the movement will be counter-clockwise.
The following example demonstrates the effects of applying the rotateY( ) function to change an element’s position in relation to its Y-axis in 3D space.
Show me
The following example demonstrates the effects of applying the rotateY( ) function to change an element’s position in relation to its Y-axis in 2D plane.
Show me
Notice use of a transition in the transform to better illustrate the amount of deviation from the origin.
rotate( ), rotate3d( ), rotateX( ), rotateZ( )