How to Resize Rotation Radius using CSS ?
Last Updated :
18 Aug, 2020
In dynamic CSS, you can resize rotation radius using CSS Custom Properties (Variables). As custom properties are now in the latest browsers from Mozilla, Google, Opera, Apple, and Microsoft – it’s definitely a good time to explore and experiment.
The pre-requisites to learn CSS Variables and CSS var() Function.
Approach:
- First, defines a global custom property named “–radius”.
- Then use calc() function to calculate “–radius” value that is 45deg. Here, you can also use any other defined variables to calculate the radius as per your need.
- It can be used to resize the rotation radius.
- Then it uses the var() function to insert the value of the custom property to rotate the object.
Note: You can update a CSS variable with JavaScript.
Example:
<!DOCTYPE html>
< html >
< head >
< style >
#box {
background-color: #029919;
width: 200px;
height: 200px;
margin: 10px;
transition: transform 1s linear;
transform-origin: bottom left;
}
:root {
--radius: calc(10 * 4.5deg);
}
.box-rotate {
transform: rotate(var(--radius));
}
</ style >
</ head >
< body >
< h1 style = "color: green;" >
GeeksForGeeks
</ h1 >
< button onclick = "rotate()" >click me</ button >
< div id = "box" ></ div >
< script >
function rotate() {
var element = document.getElementById("box");
element.classList.toggle("box-rotate");
}
</ script >
</ body >
</ html >
|
Output:
- Before clicking the button:
- After clicking the button:
Share your thoughts in the comments
Please Login to comment...