Orientation

Control the orientation of elements.

Page Contents

Rotate

Rotate an element around its center point.

<!-- `.rotate-0` does not exist, as this is the default rotation -->
<div class="rotate-45">...</div>
<div class="rotate-90">...</div>
<div class="rotate-135">...</div>
<div class="rotate-180">...</div>
<div class="rotate-225">...</div>
<div class="rotate-270">...</div>
<div class="rotate-315">...</div>

Flip

Flip elements along their horizontal or vertical axis;

Flip DOM element horizontally

Flip DOM element vertically

<div class="flip-horizontal">Flip DOM element horizontally</div>
<div class="flip-vertical">Flip DOM element vertically</div>

SASS Reference

Variables

The available Customization options, or Sass variables, that can be customized for this grouping of utility classes.

Name	Type	Default	Description
`$enable-utility-orientation`	boolean	`true`	Enable the generation of the orientation utility classes.
`$enable-utility-orientation-rotate`	boolean	`true`	Enable the generation of the rotate utility classes.
`$enable-utility-orientation-flip`	boolean	`true`	Enable the generation of the flip utility classes.
`$utility-rotate`	map	`("45": rotate(45deg), "90": rotate(90deg), "135": rotate(135deg), "180": rotate(180deg), "225": rotate(45deg), "270": rotate(270deg), "315": rotate(315deg))`	Map of rotate names and rules to be generated.

Mixins

No mixins available.