Maison > Article > interface Web > Quelles sont les propriétés en CSS qui peuvent obtenir des effets de rotation ?
Quelles sont les propriétés en CSS qui peuvent obtenir des effets de rotation ?
- 青灯夜游original
- 2021-04-06 17:33:215056parcourir
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é.
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>Rendu :
(Apprentissage du partage vidéo : 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!