Wie kann ich den Rotationsradius mithilfe von CSS dynamisch anpassen?-CSS-Tutorial-php.cn

Wie kann ich den Rotationsradius mithilfe von CSS dynamisch anpassen?

藏色散人

Freigeben： 2021-08-30 11:34:48

Original

1946 Leute haben es durchsucht

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>

Nach dem Login kopieren

Der Effekt ist wie folgt:

GIF 2021-8-30 星期一上午 11-27-50.gif

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()

Es ist zu beachten, dass vor und nach dem Operator ein Leerzeichen reserviert werden muss, zum Beispiel: width: calc(100% - 10px);
Jeder Längenwert kann mit der Funktion calc() berechnet werden.
Die Funktion calc() unterstützt „+“, „-“, „*“, „/ " Operationen; 🎜
Die Funktion 🎜calc() verwendet Standardprioritätsregeln für mathematische Operationen; 🎜

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