rotate() CSS Function

Description

The rotate() CSS function rotates an element in two-dimensional space around a rotation point by a given angle. The default pivot point is located in the center of the element and can be changed using the transform-origin property.

Syntax

transform: rotate(<angle>);

Values

  • <angle>A positive value rotates the element clockwise, a negative value rotates the element counter clockwise.

Example

<div class="normal rotated">Rotated</div>
<div class="normal">Not rotated</div>
.normal {
padding: 20px;
margin: 20px;
width: 120px;
background: #546D62;
color: white;
font-family: sans-serif;
}
.rotated {
transform: rotate(45deg);
}

Browser Support

Desktop
Explorer Edge Chrome Firefox Opera Safari
??????
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
??????