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 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: