How to rotate an element
Short answer
The rotate property turns an element by a given angle:
<div style="display: flex; gap: 24px; padding: 20px;">
<div style="width: 60px; height: 60px; background: gold; rotate: 15deg;"></div>
<div style="width: 60px; height: 60px; background: tomato; rotate: -45deg;"></div>
</div>A positive angle is clockwise. You can write deg (degrees) or turn (turns): 0.5turn is 180 degrees.
The pivot point
By default an element rotates around its center. transform-origin moves the pivot — to the top-left corner, for example:
<div style="padding: 10px 40px;">
<div style="width: 80px; height: 40px; background: lightseagreen; rotate: 20deg; transform-origin: top left;"></div>
</div>Rotating on hover
An arrow that flips around on hover:
<style>
.more { display: inline-flex; gap: 6px; cursor: pointer; }
.more span { display: inline-block; transition: rotate 0.3s; }
.more:hover span { rotate: 180deg; }
</style>
<div class="more">Show more <span>▼</span></div>Common mistake
Rotation does not work on an inline element such as a span inside text: transforms only apply to block and inline-block elements. Add display: inline-block, as in the last example. Also remember that a rotated element does not push its neighbors — it can overlap them.
Functions used in this recipe
- transform — Moves, rotates, scales or skews an element without affecting the layout around it.
- translate, rotate, scale — Separate properties for a shift, a rotation and scaling — instead of functions in `transform`.
- transition — Animates the change of a property from the old value to the new one.
- animation — Runs a `@keyframes` animation on an element.