Quelles sont les propriétés en CSS qui peuvent obtenir des effets de rotation ?-tutoriel CSS-php.cn

Quelles sont les propriétés en CSS qui peuvent obtenir des effets de rotation ?

青灯夜游

Libérer： 2023-01-04 09:34:39

original

5165 Les gens l'ont consulté

L'attribut qui peut obtenir l'effet de rotation est "transform", qui doit être utilisé avec des fonctions telles que rotate(), rotate3d(), rotateX(), rotateY(). L'attribut transform est utilisé pour appliquer une transformation 2D ou 3D à un élément, lui permettant d'être pivoté, mis à l'échelle, déplacé ou incliné.

Quelles sont les propriétés en CSS qui peuvent obtenir des effets de rotation ?

L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.

L'attribut en CSS qui peut obtenir un effet de rotation est "transform".

L'attribut transform applique une transformation 2D ou 3D à un élément. Cette propriété nous permet de faire pivoter, redimensionner, déplacer ou incliner l’élément. L'attribut

transform peut réaliser la valeur d'attribut de rotation :

rotate(angle) définit la rotation 2D et spécifie l'angle dans les paramètres.
rotate3d(x,y,z,angle) Définit la rotation 3D.
rotateX(angle) Définit une rotation 3D le long de l'axe X.
rotateY(angle) Définit une rotation 3D le long de l'axe Y.
rotateZ(angle) Définit une rotation 3D le long de l'axe Z.

Exemple :

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    div,img,body{
        margin: 0;
        padding: 0;
    }
    img.touxiang:hover{
        transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        -o-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
    }
    img.touxiang{
        margin: 0 auto;
        display: block;
        transition: all 0.2s ease-in-out;
        -webkit-transition: all 0.2s ease-in-out;
        -moz-transition: all 0.2s ease-in-out;
        -o-transition: all 0.2s ease-in-out;
        border-radius:100%;
    }
</style>
</head>
<body><br><br><br><br>
    <img src="touxiang.jpg" alt=""/>
</body>
</html>

Copier après la connexion

Rendu :

Quelles sont les propriétés en CSS qui peuvent obtenir des effets de rotation ?