Maison  >  Article  >  interface Web  >  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

WBOY
WBOYoriginal
2021-11-30 18:30:594274parcourir

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);}" .

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

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 :

Comment obtenir un effet de rotation dans le sens inverse des aiguilles dune montre sur les éléments de survol de la souris en CSS

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

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