The rotateY() function rotates an element around its vertical y-axis.
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 rotateX() function rotates an element around the x-axis in a three-dimensional space
The rotate() function spins an element either clockwise or counterclockwise in a 2D plane.
The rotateZ() function rotates an element around its z-axis, so clockwise or counterclockwise.
Most grid layouts sit in neat rows, perfectly aligned, like soldiers in formation. But sometimes you want something with more…
I came across Kitty Giraudel’s folded corners technique. I’ve been on a bit of a corner-shape kick lately, so I figured that…
For years, developers have been hacking around the limitations of `border-radius`, using clip-path, SVG masks, and fragile…
