Skip to content
Related Articles

Related Articles

How to Resize Rotation Radius using CSS ?

Improve Article
Save Article
  • Last Updated : 18 Aug, 2020
Improve Article
Save Article

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:

My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!