Documentation v1.0.11

Preview Purchase

Overview

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

Basic

Use .rotateclass on a button and .rotate-{degree}class on a icon to rotate it to following degreeoptions:
  • 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
<button type="button" class="btn btn-primary">
    Default <span class="svg-icon svg-icon-2 rotate-90"><svg></svg></span>
</button> 

<button type="button" class="btn btn-primary rotate">
    90 deg <span class="svg-icon svg-icon-2 rotate-90"><svg></svg></span>
</button>

<button type="button" class="btn btn-primary rotate">
    180 deg <span class="svg-icon svg-icon-2 rotate-180"><svg></svg></span>
</button>

<button type="button" class="btn btn-primary rotate">
    270 deg <span class="svg-icon svg-icon-2 rotate-270"><svg></svg></span>
</button>

<button type="button" class="btn btn-primary rotate">
    -90 deg <span class="svg-icon svg-icon-2 rotate-n90"><svg></svg></span>
</button>

<button type="button" class="btn btn-primary rotate">
    -180 deg <span class="svg-icon svg-icon-2 rotate-n180"><svg></svg></span>
</button>

<button type="button" class="btn btn-primary rotate">
    -270 deg <span class="svg-icon svg-icon-2 rotate-n270"><svg></svg></span>
</button>

Toggle

Click on the below buttons to toggle the button active state and rotate the icons accordingly:
// Element to indecate
var button = document.querySelector("#kt_button_1");

// Handle button click event
button.addEventListener("click", function() {
    button.classList.toggle("active");               
});
<button type="button" class="btn btn-primary rotate" id="kt_button_1">
    90 deg <span class="svg-icon svg-icon-2 rotate-90"><svg></svg></span>
</button>

Collapse

Use Rotate with .collapsibleand .collapsedclasses to toggle a block using Bootstrap Collapse  and display:
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
<!--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="svg-icon svg-icon-3 rotate-n180 ms-1"><svg></svg></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-->
Learn & Get Inspired

Support at devs.keenthemes.com

Join our developers community to find answer to your question and help others. FAQs
Get Support
Documentation
From guides and how-tos, to live demos and code examples to get started right away.
Plugins & Components
Check out our 300+ in-house components and customized 3rd-party plugins.
Layout Builder
Build your layout, preview it and export the HTML for server side integration.
What's New
Latest features and improvements added with our users feedback in mind.
Buy now