Transform

Utilities for controlling the transformation of an element.

¶Transform builder

.transform {
    --x-transform-translate-x: 0;
    --x-transform-translate-y: 0;
    --x-transform-rotate: 0;
    --x-transform-skew-x: 0;
    --x-transform-skew-y: 0;
    --x-transform-scale-x: 1;
    --x-transform-scale-y: 1;
    transform: translateX(var(--x-transform-translate-x)) translateY(var(--x-transform-translate-y)) rotate(var(--x-transform-rotate)) skewX(var(--x-transform-skew-x)) skewY(var(--x-transform-skew-y)) scaleX(var(--x-transform-scale-x)) scaleY(var(--x-transform-scale-y));
}

¶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 translate-x-n1/2 translate-y-n1/2"></div>
    <div class="transform rotate-12"></div>
    <div class="transform skew-x-12"></div>
    <div class="transform scale-50"></div>
</div>

¶Remove transform

Use the .transform-none to remove this behaviour on any breakpoint.

<div class="transform translate-x-32 transform-md-none">
    ...
</div>

¶Responsive

Responsive variations also exist for each transorm value. Use the .transform-{breakpoint} for sm, md, lg, xl, and xxl to any existing transform utility.

<div class="transform-md scale-md-50 scale-lg-100 ..."></div>