rotate

Overview

Rotate is a custom component used to rotate an element with a spesific angle when it's parent assigned with .active class. This component can be useful to change a buttons icon direction when it's .active class is toggled.

Basic

Use .rotate class on a button and .rotate-{degree} class on a icon to rotate it to following degree options:

90 - for classes that rotates to 90 deg
180 - for classes that rotates to 180 deg
270 - for classes that rotates to 270 deg
n90 - for classes that rotates to negative -90 deg
n180 - for classes that rotates to negative -180 deg
n270 - for classes that rotates to negative -270 deg

html

<button type="button" class="btn btn-primary">
    Default <i class="ki-duotone ki-black-right-line fs-2 ms-3 ms-3"><span class="path1"></span><span class="path2"></span></i>
</button>

<button type="button" class="btn btn-primary rotate">
    90 deg <i class="ki-duotone ki-black-right-line fs-2 ms-3 ms-3"><span class="path1"></span><span class="path2"></span></i>
</button>

<button type="button" class="btn btn-primary rotate">
    180 deg <i class="ki-duotone ki-black-right-line fs-2 ms-3 ms-3"><span class="path1"></span><span class="path2"></span></i>
</button>

<button type="button" class="btn btn-primary rotate">
    270 deg <i class="ki-duotone ki-black-right-line fs-2 ms-3 ms-3"><span class="path1"></span><span class="path2"></span></i>
</button>

<button type="button" class="btn btn-primary rotate">
    -90 deg <i class="ki-duotone ki-black-right-line fs-2 ms-3 ms-3"><span class="path1"></span><span class="path2"></span></i>
</button>

<button type="button" class="btn btn-primary rotate">
    -180 deg <i class="ki-duotone ki-black-right-line fs-2 ms-3 ms-3"><span class="path1"></span><span class="path2"></span></i>
</button>

<button type="button" class="btn btn-primary rotate">
    -270 deg <i class="ki-duotone ki-black-right-line fs-2 ms-3 ms-3"><span class="path1"></span><span class="path2"></span></i>
</button>

Toggle

Use data-kt-rotate="true" attribute to automatically toggle the button active state or use Javascript code to toggle programmatically:

html

<button type="button" class="btn btn-primary me-5 rotate" data-kt-rotate="true">
    90 deg <i class="ki-duotone ki-black-right-line fs-2 rotate-90 ms-3"><span class="path1"></span><span class="path2"></span></i>
</button>

<button type="button" class="btn btn-danger me-5 rotate" data-kt-rotate="true">
    180 deg <i class="ki-duotone ki-black-right-line fs-2 rotate-90 ms-3"><span class="path1"></span><span class="path2"></span></i>
</button>

<button type="button" class="btn btn-success me-5 rotate" id="kt_button_toggle">
    270 deg <i class="ki-duotone ki-black-right-line fs-2 rotate-90 ms-3"><span class="path1"></span><span class="path2"></span></i>
</button>

Collapse

Use Rotate with .collapsible and .collapsed classes to toggle a block using Bootstrap Collapse and display:

html

<!--begin::Toggle link-->
<a data-bs-toggle="collapse" href="#kt_toggle_block" class="btn btn-link btn-color-muted btn-active-color-primary rotate collapsible collapsed">
    Toggle block
    <span class="d-flex flex-center rotate-n180 ms-3">
    <i class="ki-duotone ki-down fs-3"></i>
    </span>
</a>
<!--end::Toggle link-->

<!--begin::Toggle block-->
<div id="kt_toggle_block" class="collapse">
    <div class="rounded bg-light p-10">
        .....
    </div>
</div>
<!--end::Toggle block-->