rotateY()

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; } CodePen Embed Fallback The rotateY() function is defined in the CSS Transforms Module Level 2 specification. Syntax rotateY() = rotateY( [ | ] ) Arguments /* in degrees */ rotateY(90deg) /* Element rotates 90 degrees to the right */ rotateY(-180deg) /* Element rotates 180 degrees to the left */ /* in turns */ rotateY(0.5turn) /* Element rotates 180 degrees (half a full rotation) */ rotateY(1turn) /* Element completes a full 360-degree rotation */ /* in radians */ rotateY(1.57rad) /* Approximately 90 degrees to the right */ rotateY(-3.14rad) /* Approximately 180 degrees to the left */ The rotateY() function takes a single argument, which defines how much the element is rotated around its vertical axis. : Values like 45deg , 0.5turn , -90deg , 1.57rad , etc. When it is a positive angle, the right edge of the element rotates away from you (the element appears to rotate to the right). When the angle is a negative value, the left edge rotates and the element appears to rotate to the left. The type has four units to choose from: deg : One degree is 1/360 of a full circle. grad : One gradian is 1/400 of a full circle. rad : A radian is the length of a circle’s diameter around the shape’s arc. One radian is 180deg , or 1/2 of a full circle. One full circle is 2π radians, which is equal to 6.2832rad or 360deg . turn : One turn is one full circle. So, halfway around a circle is equal to .5turn , or 180deg . Setting up 3D transfo