如何使用CSS動態調整旋轉半徑？
- 藏色散人原創
- 2021-08-30 11:34:482025瀏覽
在之前的文章《教你用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中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn