CSS - rotateY()

The rotateY()CSS function defines a transformation that moves the element around the ordinate without deforming it. The amount of movement is defined by the specified angle; if positive, the movement will be clockwise, if negative, it will be counter-clockwise.

Examples

HTML

HTML
<p>foo</p>
<p class="transformed">bar</p>

CSS

CSS
p {
width: 50px;
height: 50px;
background-color: teal;
}

.transformed{
transform: rotateY(60deg);
background-color: blue;
}

CSS
rotateY(a)

Description

The rotateY()CSS function defines a transformation that moves the element around the ordinate without deforming it. The amount of movement is defined by the specified angle; if positive, the movement will be clockwise, if negative, it will be counter-clockwise.

The axis of rotation passes by the origin, defined by transform-origin CSS property.

rotateY(a)is a shorthand for rotate3D(0, 1, 0, a).

In opposition to rotations in the plane, the composition of 3D rotations is usually not commutative; it means that the order in which the rotations are applied is crucial.
a
Is an <angle> representing the angle of the rotation. A positive angle denotes a clockwise rotation, a negative angle a counter-clockwise one.
Cartesian coordinates on ℝ2 Homogeneous coordinates on ℝℙ2 Cartesian coordinates on ℝ3 Homogeneous coordinates on ℝℙ3
This transform applies to the 3D space and cannot be represented on the plane. $\left(\begin{array}{ccc}cos\left(a\right)& 0& sin\left(a\right)\\ 0& 1& 0\\ -sin\left(a\right)& 0& cos\left(a\right)\end{array}\right)$ $\left(\begin{array}{cccc}cos\left(a\right)& 0& sin\left(a\right)& 0\\ 0& 1& 0& 0\\ -sin\left(a\right)& 0& cos\left(a\right)& 0\\ 0& 0& 0& 1\end{array}\right)$