Maison >interface Web >tutoriel CSS >Comment obtenir un effet de rotation dans le sens inverse des aiguilles d'une montre sur les éléments de survol de la souris en CSS
Comment obtenir un effet de rotation dans le sens inverse des aiguilles d'une montre sur les éléments de survol de la souris en CSS
- WBOYoriginal
- 2021-11-30 18:30:594290parcourir
En CSS, vous pouvez utiliser le sélecteur de pseudo-classe ":hover" et l'attribut de transformation pour obtenir l'effet de rotation dans le sens inverse des aiguilles d'une montre des éléments survolés par la souris. La syntaxe est "element:hover{transform:rotateZ (angle de rotation);}" .
L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.
Comment obtenir l'effet de rotation dans le sens inverse des aiguilles d'une montre des éléments survolés par la souris en CSS
En CSS, vous pouvez utiliser le sélecteur de pseudo-classe ":hover" et l'attribut de transformation pour obtenir l'effet de rotation dans le sens inverse des aiguilles d'une montre lorsque la souris glisse sur l'image. La propriété 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.
Regardons un exemple. L'exemple est le suivant :
<html>
<head>
<style>
.keleyi {
width: 220px;
height: 220px;
margin: 0 auto;
background: no-repeat url("1118.02.png") left top;
-webkit-background-size: 220px 220px;
background-size: 220px 220px;
-webkit-border-radius: 110px;
border-radius: 110px;
-webkit-transition: -webkit-transform 2s ease-out;
}
.keleyi:hover {
-webkit-transform: rotateZ(-360deg);
transform: rotateZ(-360deg);
}
</style>
</head>
<body>
<div class="keleyi"></div>
</body>
</html>Résultat de sortie :
(Partage vidéo d'apprentissage : 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!