Transform Origin
Utilities for changing the position of transformed elements.
|
Class
|
Properties
|
|---|---|
| origin-center | |
| origin-top | |
| origin-top-right | |
| origin-right | |
| origin-bottom-right | |
| origin-bottom | |
| origin-bottom-left | |
| origin-left | |
| origin-top-left |
Usage
Use the transform utilities to apply a 2D or 3D transformation to an element. This property allows you to rotate, scale, rotate, move or skew elements.
<div class="d-flex">
<div class="transform origin-center rotate-45"></div>
<div class="transform origin-top-right rotate-45"></div>
<div class="transform origin-bottom-right rotate-45"></div>
<div class="transform origin-bottom-left rotate-45"></div>
</div>
Responsive
Responsive variations also exist for each origin value. Use the .origin-{breakpoint} for sm, md, lg, xl, and xxl to any existing origin utility.
<div class="transform origin-top origin-md-bottom-right ..."></div>