Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

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.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.


  • 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.


<!DOCTYPE html>
        #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));
    <h1 style="color: green;">
    <button onclick="rotate()">click me</button>
    <div id="box"></div>
    <!-- Script to add functionality  
        on button -->
        function rotate() {
            var element = document.getElementById("box");


  • Before clicking the button:

  • After clicking the button:

My Personal Notes arrow_drop_up
Recommended Articles
Page :