Logo

Documentation v1.0.0

  • 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 .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-->
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
User Management App
Calendar App
Chat App
Customers App
Upgrade to Ceres HTML Pro
Download Ceres HTML Free