如何使用 CSS 调整旋转半径？

在动态 CSS 中，您可以使用 CSS 自定义属性(变量)调整旋转半径的大小。由于自定义属性现在在 Mozilla、Google、Opera、Apple 和 Microsoft 的最新浏览器中，这绝对是探索和试验的好时机。

学习 CSS 变量和 CSS var()函数的先决条件。

方法：

• 首先，定义一个名为“-radius”的全局自定义属性。
• 然后使用 calc()函数计算“-radius”值，即 45deg。在这里，您还可以根据需要使用任何其他定义的变量来计算半径。
• 它可用于调整旋转半径的大小。
• 然后它使用 var()函数插入自定义属性的值来旋转对象。

注意：您可以使用 JavaScript 更新 CSS 变量。

例子：

  

    
        #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));
        }
    

  

    
        GeeksForGeeks
    
    click me
    
  
    
    
        function rotate() {
            var element = document.getElementById("box");
            element.classList.toggle("box-rotate");
        }
    

  

输出：

• 点击按钮前：

  

• 点击按钮后：