Skew
Use the skew utilities to control the transformation that skews an element on the 2D plane.
|
Class
|
Properties
|
|---|---|
| skew-y-0 | |
| skew-y-1 | |
| skew-y-2 | |
| skew-y-3 | |
| skew-y-6 | |
| skew-y-12 | |
| skew-x-0 | |
| skew-x-1 | |
| skew-x-2 | |
| skew-x-3 | |
| skew-x-6 | |
| skew-x-12 |
Usage
Use the skew utilities to control the transformation that skews an element on the 2D plane.
<div class="d-flex">
<div class="transform skew-x-6"></div>
<div class="transform skew-x-12"></div>
<div class="transform skew-y-6"></div>
<div class="transform skew-y-12"></div>
</div>
Responsive
Responsive variations also exist for each skew value. Use the .skew-{breakpoint}-{value} for sm, md, lg, xl, and xxl to any existing skew utility.
<div class="transform skew-x-12 skew-x-md-0 ..."></div>