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.
										
									 
									
									
									
										
										
										 
										
										
										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 
										 
										
										
										
											
												Default
												
												
													
														 
												 
												 
												90 deg
												
												
													
														 
												 
												 
												180 deg
												
												
													
														 
												 
												 
												270 deg
												
												
													
														 
												 
												 
												-90 deg
												
												
													
														 
												 
												 
												-180 deg
												
												
													
														 
												 
												 
												-270 deg
												
												
													
														 
												 
												 
											 
										 
										
										
										
											
											
												copy 
												
													
<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>
 
												 
											 
											
										 
										
									 
									
									
									
										
										
										 
										
										
										Use
										data-kt-rotate="true"attribute to automatically toggle the button active state or use Javascript code to toggle programmatically:
										
										
										
										
										
										
											
											
												copy 
												
												
													
														
															
<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");
});
 
														 
													 
												 
											 
											
										 
										
									 
									
									
									
										
										
										 
										
										
										Use Rotate with
										
.collapsibleand
										
.collapsedclasses 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.
												 
												
											 
										 
										
										
										
											
											
												copy 
												
													
<!--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-->