Maison > Article > interface Web > Comment ajuster dynamiquement le rayon de rotation en utilisant CSS ?

Comment ajuster dynamiquement le rayon de rotation en utilisant CSS ?

藏色散人original: 2021-08-30 11:34:481915parcourir

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>

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Hyper pratique ! Utilisez CSS3 pour superposer deux images et les afficher ensembleArticle suivant：Hyper pratique ! Utilisez CSS3 pour superposer deux images et les afficher ensemble

Articles Liés

Voir plus