在之前的文章《教你用CSS畫一個有漸層邊框的圓！ 》中跟大家介紹如何使用CSS繪製一個有漸層邊框的圓，有興趣的朋友可以去了解一下~
那麼本文的重點內容就是教大家如何使用css調整旋轉半徑。
在CSS中，我們可以使用CSS自訂屬性(變數)調整旋轉半徑的大小。現在Mozilla、Google、Opera、蘋果和微軟的最新瀏覽器都有自訂屬性，所以咱們來試試看~
下面我們直接上完整程式碼：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#box {
background-color: orange;
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: red;">
PHP中文网
</h1>
<button onclick="rotate()">点击我</button>
<div id="box"></div>
<script>
function rotate() {
var element = document.getElementById("box");
element.classList.toggle("box-rotate");
}
</script>
</body>
</html>效果如下：
在上述程式碼中：
首先，定義一個名為「-radius」的全域自訂屬性。
然後使用calc() 函數計算「-radius」值，即 45deg；我們也可以根據需要使用任何其他定義的變數來計算半徑，它可用於調整旋轉半徑的大小。
最後使用 var() 函數插入自訂屬性的值來旋轉物件就可以了。
附註：
calc() 函數用於動態計算長度值。
要注意的是，運算子前後都需要保留一個空格，例如：width: calc(100% - 10px);
#任何長度值都可以使用calc()函數來計算；
calc()函數支援" ", "-", "*", "/" 運算；
calc()函數使用標準的數學運算優先權規則；
#var() 函數用來插入自訂的屬性值，如果一個屬性值在多處被使用，方法就很有用。 （支援版本：CSS3）
PHP中文網平台有非常多的影片教學資源，歡迎大家學習《css影片教學》！
以上是如何使用CSS動態調整旋轉半徑？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
如何使用HTML，CSS和JavaScript創建動畫倒計時計時器Apr 11, 2025 am 11:29 AM您是否曾經在項目上需要一個倒計時計時器？對於這樣的東西，可以自然訪問插件，但實際上更多
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
DVWA
Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序，非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具，幫助Web開發人員更好地理解保護網路應用程式的過程，並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞，難度各不相同。請注意，該軟體中
SAP NetWeaver Server Adapter for Eclipse
將Eclipse與SAP NetWeaver應用伺服器整合。
EditPlus 中文破解版
體積小，語法高亮，不支援程式碼提示功能
Dreamweaver Mac版
視覺化網頁開發工具
禪工作室 13.0.1
強大的PHP整合開發環境
