css - 2D Transforms Part 2: Rotating Elements

The rotate() function rotates an element around its origin point.

Examples and Explanation

Basic Rotation

.rotate {

    transform: rotate(45deg);

}

HTML Code

<div class="rotate">Rotated Element</div>

Explanation: The element is rotated 45 degrees clockwise.

Negative Rotation

.rotate-negative {

    transform: rotate(-30deg);

}

Explanation: Negative angles rotate the element counterclockwise.

Setting a Custom Origin

.rotate-origin {

    transform: rotate(90deg);

    transform-origin: top left;

}

Explanation: The transform-origin property changes the pivot point for rotation.

Use Case: Rotation is used for creating spinning animations or emphasizing elements.