# Documentation v8.0.38

Preview Downloads Purchase

# 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:
Toggle block
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-->

### Explore

### Metronic Licenses

License FAQs
Regular License
For single end product used by you or one client
$ 39
Extended License
For single SaaS app with paying users
$ 969
Custom License
Reach us for custom license offers.
Contact Us
Buy Now

### Metronic Demos

Demo 1
Demo 2
Demo 3
Demo 4
Demo 5
Demo 6
Demo 7
Demo 8
Demo 9
Demo 10
Demo 11
Demo 12
Demo 13
Demo 14
Demo 15
Demo 16
Demo 17
Demo 18
Demo 19
Demo 20
Demo 21
Demo 22
Coming soon
Coming soon

##### 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 & Videos
From guides and video tutorials, to live demos and code examples to get started.
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.
Metronic Downloads
Download your prefered framework and demo with one click.
What's New
Latest features and improvements added with our users feedback in mind.
Buy now