Rotate an Element 45 Degrees with CSS

Rotating Elements with rotateZ()

The rotateZ() function (or simply rotate()) rotates an element clockwise around the Z axis, which is the axis pointing out of the screen toward the viewer.

The CSS

.rotated {
  transform: rotateZ(45deg);
}

Key Concepts

• Positive values rotate clockwise: rotateZ(45deg) turns the element 45 degrees to the right.
• Negative values rotate counter-clockwise: rotateZ(-45deg) turns it to the left.
• Full rotation is 360 degrees: rotateZ(360deg) returns to the original position.

Transform Origin

By default, rotation happens around the element's center (transform-origin: center center). You can change the pivot point:

.corner-rotate {
  transform: rotateZ(45deg);
  transform-origin: top left;
}

This rotates the element around its top-left corner, producing a very different visual result.

Common Patterns

• Diamond shape: Rotate a square 45 degrees to create a diamond.
• Icon rotation: Rotate chevron icons to indicate dropdown state.
• Decorative angles: Add visual interest to section dividers or badges.