Im vorherigen Artikel „Lernen Sie, wie Sie mithilfe von CSS einen Kreis mit einem Verlaufsrahmen zeichnen! 》Stellt Ihnen vor, wie Sie mit CSS einen Kreis mit einem Verlaufsrand zeichnen. Interessierte Freunde können mehr darüber erfahren~
Der Schwerpunkt dieses Artikels liegt darauf, Ihnen beizubringen, wie Sie mit CSS den Rotationsradius anpassen.
In CSS können wir benutzerdefinierte CSS-Eigenschaften (Variablen) verwenden, um die Größe des Rotationsradius anzupassen. Jetzt haben die neuesten Browser von Mozilla, Google, Opera, Apple und Microsoft benutzerdefinierte Attribute, also probieren wir es aus~
Gehen wir direkt zum vollständigen Code:
<!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>Der Effekt ist wie folgt:
Im obigen Code:
Definieren Sie zunächst ein globales benutzerdefiniertes Attribut mit dem Namen „-radius“.
Dann verwenden Sie die Funktion calc(), um den „-radius“-Wert zu berechnen, der 45 Grad beträgt. Bei Bedarf können wir auch beliebige andere definierte Variablen verwenden, um den Radius zu berechnen, der zum Anpassen der Größe des Rotationsradius verwendet werden kann .
Verwenden Sie abschließend die Funktion var(), um den Wert des benutzerdefinierten Attributs einzufügen, um das Objekt zu drehen.
Hinweis:
calc()-Funktion wird verwendet, um den Längenwert dynamisch zu berechnen. calc() 函数用于动态计算长度值。
需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
任何长度值都可以使用calc()函数进行计算；
calc()函数支持 "+", "-", "*", "/" 运算；
calc()函数使用标准的数学运算优先级规则；
var()
var() wird zum Einfügen benutzerdefinierter Operationen verwendet Attributwerte: Diese Methode ist nützlich, wenn ein Attributwert an mehreren Stellen verwendet wird. (Unterstützte Version: CSS3) 🎜🎜Die chinesische Website-Plattform verfügt über viele Video-Lehrressourcen. Willkommen zum Erlernen des „🎜CSS-Video-Tutorials“! 🎜Das obige ist der detaillierte Inhalt vonWie kann ich den Rotationsradius mithilfe von CSS dynamisch anpassen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
