Heim > Artikel > Web-Frontend > Wie kann ich den Rotationsradius mithilfe von CSS dynamisch anpassen?

Wie kann ich den Rotationsradius mithilfe von CSS dynamisch anpassen?

藏色散人Original: 2021-08-30 11:34:481962Durchsuche

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:

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Super praktisch! Verwenden Sie CSS3, um zwei Bilder zu überlagern und zusammen anzuzeigenNächster Artikel：Super praktisch! Verwenden Sie CSS3, um zwei Bilder zu überlagern und zusammen anzuzeigen

In Verbindung stehende Artikel

Mehr sehen