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>