Comment ajuster dynamiquement le rayon de rotation en utilisant CSS ?-tutoriel CSS-php.cn

Comment ajuster dynamiquement le rayon de rotation en utilisant CSS ?

藏色散人

Libérer： 2021-08-30 11:34:48

original

1945 Les gens l'ont consulté

Dans l'article précédent "Apprenez à dessiner un cercle avec une bordure dégradée en utilisant CSS ! 》Vous présente comment utiliser CSS pour dessiner un cercle avec une bordure dégradée. Les amis intéressés peuvent en apprendre davantage ~

L'objectif de cet article est de vous apprendre à utiliser CSS pour ajuster le rayon de rotation.

En CSS, nous pouvons utiliser des propriétés personnalisées CSS (variables) pour ajuster la taille du rayon de rotation. Désormais, les derniers navigateurs de Mozilla, Google, Opera, Apple et Microsoft ont des attributs personnalisés, alors essayons ~

Passons directement au code complet :

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

Copier après la connexion

L'effet est le suivant :

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

Dans le code ci-dessus :

Tout d'abord, définissez un attribut personnalisé global nommé "-radius".

Ensuite, utilisez la fonction calc() pour calculer la valeur "-radius", qui est de 45 degrés ; nous pouvons également utiliser toute autre variable définie pour calculer le rayon si nécessaire, qui peut être utilisée pour ajuster la taille du rayon de rotation. .

Enfin, utilisez la fonction var() pour insérer la valeur de l'attribut personnalisé pour faire pivoter l'objet.

Remarque :

La fonction calc() est utilisée pour calculer dynamiquement la valeur de longueur. calc() 函数用于动态计算长度值。

需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
任何长度值都可以使用calc()函数进行计算；
calc()函数支持 "+", "-", "*", "/" 运算；
calc()函数使用标准的数学运算优先级规则；

var()

Il est à noter qu'un espace doit être réservé avant et après l'opérateur, par exemple : width: calc(100% - 10px);
Toute valeur de longueur peut être calculée à l'aide de la fonction calc()
La fonction calc() prend en charge "+", "-", "*", "/ ; " opérations ; 🎜
La fonction 🎜calc() utilise les règles de priorité des opérations mathématiques standard ; 🎜

🎜La fonction var() est utilisée pour insérer des valeurs d'attribut , cette méthode est utile si une valeur d'attribut est utilisée à plusieurs endroits. (Version prise en charge : CSS3) 🎜🎜La plate-forme de sites Web chinois PHP propose de nombreuses ressources pédagogiques vidéo. Bienvenue à tous pour apprendre le "🎜Tutoriel vidéo CSS🎜" ! 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!