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
<p>foo</p> <p class="transformed">bar</p>
CSS
p { width: 50px; height: 50px; background-color: teal; } .transformed{ transform: rotateY(60deg); background-color: blue; }
Result
Syntax
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)
.
- 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. |
License
© 2016 Mozilla 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