Transform
rotate
rotate turns an element. It does the same as the rotate() function of transform, as a property separate from transform.
Syntax
none | <angle> | [ x | y | z | <number>{3} ] && <angle>Preview
Code
.box {
background: linear-gradient(
135deg,
#88d1c7,
#77a7d7,
#eaac3a
);
border-radius: 8px 32px;
rotate: 30deg;
}Controls
About
Values
Write the angle in deg (degrees), turn (turns), rad or grad (rotate: 45deg). Positive values turn clockwise and negative values counterclockwise. The initial value is none, which does not rotate it.
It turns around transform-origin (the center of the element by default). In the preview on this page, the dashed outline is the original position. Rotating the element doesn't change the layout around it.
Choosing an axis
Writing x, y or z before or after the angle turns the element around that axis. Leaving it out means z (the axis pointing out of the screen), which is an ordinary rotation.
x: turns around the horizontal axis, tipping the top and bottom away from and toward you.y: turns around the vertical axis, swinging the left and right sides away from and toward you.y 180degflips it left to right.
Without perspective on the parent there is no depth, so turning on the x axis looks like squashing it vertically, and turning on the y axis like squashing it horizontally (x 60deg halves its height).
The axis can also be written as three numbers (rotate: 1 1 0 45deg). The controls on this page don't cover that, but you can type it into the code.
How it relates to transform
translate, rotate and scale are properties separate from transform, so writing them together applies all of them. Writing all four is the same as adding them in this order in front of the transform value, as in transform: translate() rotate() scale() …. This is handy for changing just the angle on hover or in an animation while leaving the other transforms as they are.
Chrome and Edge 104, Firefox 72 and Safari 14.1 and later support it.