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)`

.

## Syntax

rotateY(a)

## Values

*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(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)$ |

## 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; }