How to Resize Rotation Radius using CSS ?
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;" > w3wiki </ h1 > < button onclick = "rotate()" >click me</ button > < div id = "box" ></ div > <!-- Script to add functionality on button --> < 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: