Logo

Documentation v1.0.6

  • Base
  • Rotate Exclusive
Preview Upgrade to Pro

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 
<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

Use data-kt-rotate="true" attribute to automatically toggle the button active state or use Javascript code to toggle programmatically: 
<button type="button" class="btn btn-primary me-5 rotate" data-kt-rotate="true">
    90 deg <span class="svg-icon svg-icon-2 rotate-90"><svg></svg></span>
</button>

<button type="button" class="btn btn-danger me-5 rotate" data-kt-rotate="true">
    180 deg <span class="svg-icon svg-icon-2 rotate-90"><svg></svg></span>
</button>

<button type="button" class="btn btn-success me-5 rotate" id="kt_button_toggle">
    270 deg <span class="svg-icon svg-icon-2 rotate-90"><svg></svg></span>
</button>
// Element to indecate
var button = document.querySelector("#kt_button_toggle");

// Handle button click event
button.addEventListener("click", function() {
    button.classList.toggle("active");               
});

Collapse

Use Rotate with .collapsible and .collapsed classes 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-->
Upgrade To Pro
Pro Version Benefits Free Pro
UI Elements 20 100
In-house Components 20 40
Crafted Pages 5 20
Complete Documentation
Product Support
Layout Builder
Source Vectors
Email Templates
Calendar App
User Management App
Chat App
Customers App
Upgrade to Jet HTML Free
Download Jet HTML Free
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