/CSS

# rotateY()

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.

## Try it

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

Note: Unlike rotations in the 2D plane, the composition of 3D rotations is usually not commutative. In other words, the order in which the rotations are applied impacts the result.

## Syntax

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

### 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 transformation applies to the 3D space and can't 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)$

## Examples

### HTML

```<div>Normal</div>
<div class="rotated">Rotated</div>
```

### CSS

```div {
width: 80px;
height: 80px;
background-color: skyblue;
}

.rotated {
transform: rotateY(60deg);
background-color: pink;
}
```

## Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
`rotateY`
12
12
10
10
15
4
3
18
10
14
3.2
1.0