Rotate
Utilities for controlling the rotation an element around a fixed point.
|
Class
|
Properties
|
|---|---|
| rotate-0 | |
| rotate-1 | |
| rotate-2 | |
| rotate-3 | |
| rotate-6 | |
| rotate-12 | |
| rotate-45 | |
| rotate-90 | |
| rotate-180 |
Usage
Use the rotate utility classes to control the rotation an element around a fixed point.
<div class="d-flex">
<div class="transform rotate-12"></div>
<div class="transform rotate-45"></div>
<div class="transform rotate-90"></div>
<div class="transform scale-180"></div>
</div>
Negative rotations
You can also use negative values to rotate an element in the inverse direction.
<div class="d-flex">
<div class="transform rotate-n12"></div>
<div class="transform rotate-n45"></div>
</div>
Responsive
Responsive variations also exist for each rotate value. Use the .rotate-{breakpoint}-{value} for sm, md, lg, xl, and xxl to any existing rotate utility.
<div class="transform rotate-12 rotate-md-0 ..."></div>