Related Articles

Related Articles

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:



filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

  • Before clicking the button:
  • After clicking the button:

full-stack-img




My Personal Notes arrow_drop_up
Recommended Articles
Page :