Rotation

Rotation

Classes to easily transform and rotate elements.

Element Rotations

Element rotations best work when used in conjunction with absolute positioning. Most of the time, these classes are used to rotate decorative images and svg's.

HTML

<div class="row">
    <div class="col-lg-4">
        <div class="border h-px-200 w-px-200 mx-auto">
            <!-- Original with no rotation for comparison -->
            <svg viewBox="0 0 1000 1000">
                <use fill="url(#bg-gradient-primary)" href="/assets/images/global-shared/use.svg#bg-triangle-corner"></use>
            </svg>
        </div>
    </div>
    <div class="col-lg-4 mt-3 mt-lg-0">
        <div class="border h-px-200 w-px-200 mx-auto">
            <svg class="rotate-90" viewBox="0 0 1000 1000">
                <use fill="url(#bg-gradient-primary)" href="/assets/images/global-shared/use.svg#bg-triangle-corner"></use>
            </svg>
        </div>
    </div>
    <div class="col-lg-4 mt-3 mt-lg-0">
        <div class="border h-px-200 w-px-200 mx-auto">
            <svg class="rotate-180" viewBox="0 0 1000 1000">
                <use fill="url(#bg-gradient-primary)" href="/assets/images/global-shared/use.svg#bg-triangle-corner"></use>
            </svg>
        </div>
    </div>
</div>

Sass Map

Add to the map below to generate additional rotation classes. This map is found in choco-theme/scss/variables/_global.scss.

$rotations: (
    "10":   10deg,
    "20":   20deg,
    "30":   30deg,
    "45":   45deg,
    "90":   90deg,
    "145":  145deg,
    "180":  180deg,
    "360":  360deg
);