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 to add functionality   
        on button -->
    <script> 
        function rotate() { 
            var element = document.getElementById("box"); 
            element.classList.toggle("box-rotate"); 
        } 
    </script> 
</body> 
  
</html> 