CSS Rotate


Example

HTML

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

CSS

.rotate {
    width: 100px;
    height: 100px;
    background: teal;
    transform: rotate(45deg);
}

This example will rotate the div by 45 degrees clockwise. The center of rotation is in the center of the div, 50% from left and 50% from top. You can change the center of rotation by setting the transform-origin property.

transform-origin: 100% 50%;

The above example will set the center of rotation to the middle of the right side end.