The rotateY()
CSS function defines a transformation that rotates an element around the ordinate (vertical axis) without deforming it. Its result is a <transform-function>
data type.
The axis of rotation passes through an origin, defined by the transform-origin
CSS property.
Note: rotateY(a)
is equivalent to rotate3d(0, 1, 0, a)
.
The amount of rotation created by rotateY()
is specified by an <angle>
. If positive, the movement will be clockwise; if negative, it will be counter-clockwise.
rotateY(a)
a
<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 transformation applies to the 3D space and can't be represented on the plane. | $\left(\begin{array}{ccc}cos(a)& 0& sin(a)\\ 0& 1& 0\\ -sin(a)& 0& cos(a)\end{array}\right)$ | $\left(\begin{array}{cccc}cos(a)& 0& sin(a)& 0\\ 0& 1& 0& 0\\ -sin(a)& 0& cos(a)& 0\\ 0& 0& 0& 1\end{array}\right)$ |
<div>Normal</div> <div class="rotated">Rotated</div>
div { width: 80px; height: 80px; background-color: skyblue; } .rotated { transform: rotateY(60deg); background-color: pink; }
Please see the <transform-function>
data type for compatibility info.
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotateY