The CSS rotateY() function rotates an element around its vertical y-axis. Specifically, it horizontally flips an element from left to right (or right to left for that matter). It is one of many transform functions used along with the transform property.

The y-axis is the axis of rotation, so the element turns horizontally. Imagine a pin is stuck to the top of an element and it can only rotate left or right.

.demo-element { transform: rotateY(var(--deg)); transition: transform 0.3s ease; }

The rotateY() function is defined in the CSS Transforms Module Level 2 specification.

Syntax

rotateY() = rotateY( [ <angle> | <zero> ] )

Arguments

/* <angle> in degrees */ rotateY(90deg) /* Element rotates 90 degrees to the right */ rotateY(-180deg) /* Element rotates 180 degrees to the left */

/* <angle> in turns */ rotateY(0.5turn) /* Element rotates 180 degrees (half a full rotation) */ rotateY(1turn) /* Element completes a full 360-degree rotation */

/* <angle> in radians */ rotateY(1.57rad) /* Approximately 90…