Positive Rotation
0°
45°
90°
135°
180°
Negative Rotation
0°
-45°
-90°
-135°
-180°
Other Elements
0°
45°
90°
135°
180°
0°
-45°
-90°
-135°
-180°
Other Elements - Continued
0°
45°
90°
135°
180°
0°
-45°
-90°
-135°
-180°
Adding Rotation to Elements
If you want to add rotation to an element, you have a choice of 4 pre-defined levels: 45, 90, 135 & 180°. To use the individual rotation levels all you have to do is simply add the class name to the element e.g. rotate45
Our code below is for the Font Awesome video camera:
Positive
- 45°
- 90°
- 135°
- 180°
<span class="fa fa-video-camera fa-2x rotate45"></span>
<span class="fa fa-video-camera fa-2x rotate90"></span>
<span class="fa fa-video-camera fa-2x rotate135"></span>
<span class="fa fa-video-camera fa-2x rotate180"></span>Negative
- -45°
- -90°
- -135°
- -180°
<span class="fa fa-video-camera fa-2x rotate-45"></span>
<span class="fa fa-video-camera fa-2x rotate-90"></span>
<span class="fa fa-video-camera fa-2x rotate-135"></span>
<span class="fa fa-video-camera fa-2x rotate-180"></span>Pretty much any element can be rotated using this method. Whether or not it's good is a personal preference.
The standard use in this template is to rotate icons and or shapes.