The rotate function
The rotate() function sets an element
rotation by a given angle. It is used together
with the
transform
property. The property value is an angle in any
angle units.
A positive value rotates clockwise, a negative
value - counterclockwise. The rotation is performed
around the point specified by the
transform-origin
property.
Syntax
selector {
transform: rotate(угол);
}
Example
In this example, the block is rotated
30 degrees clockwise:
<div id="elem">lorem ipsum</div>
#elem {
transform: rotate(30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Example
In this example, the block is rotated
30 degrees counterclockwise:
<div id="elem">lorem ipsum</div>
#elem {
transform: rotate(-30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Example
In this example, the block will rotate by
1 turn on hover, since the rotation
value is set to 1turn (the same effect
can be achieved by setting the rotation
angle to 360deg). For smooth rotation, the
transition
property is added:
<div id="elem">lorem ipsum</div>
#elem {
border: 3px solid black;
width: 100px;
height: 50px;
transition: transform 3s linear;
}
#elem:hover {
transform: rotate(1turn);
}
:
