web-dev-qa-db-fra.com

Faire pivoter ou faire pivoter une image en survol

Je veux savoir comment faire un image qui tourne ou qui tourne quand il est survolé. Je voudrais savoir comment émuler cette fonctionnalité avec CSS sur le code suivant:

img {
  border-radius: 50%;
}
<img src="http://i.imgur.com/3DWAbmN.jpg" />
csscss3hovercss-transitionscss-transforms
49
user3597950

Vous pouvez utiliser les transitions CSS3 avec rotate() pour faire pivoter l'image au survol .

Image en rotation:

img {
  border-radius: 50%;
  -webkit-transition: -webkit-transform .8s ease-in-out;
          transition:         transform .8s ease-in-out;
}
img:hover {
  -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
}
<img src="https://i.stack.imgur.com/BLkKe.jpg" width="100" height="100"/>

Voici un violon DÉMO

Plus d'infos et références:

  • un guide sur les transitions CSS sur MDN
  • un guide sur les transformations CSS sur MDN
  • tableau de prise en charge du navigateur pour les transformations 2D sur caniuse.com
  • tableau de prise en charge du navigateur pour les transitions sur caniuse.com
122
web-tiki

C'est très simple.

  1. Vous ajoutez une image.

  2. Vous créez une propriété css pour cette image.

    img { transition: all 0.3s ease-in-out 0s; }

  3. Vous ajoutez une animation comme ça:

    img:hover
{
    cursor: default;
    transform: rotate(360deg);
    transition: all 0.3s ease-in-out 0s;
}
4
s0h3ck

si vous souhaitez faire pivoter des éléments inline, vous devez d'abord définir l'élément inline sur inline-block.

i {
  display: inline-block;
}

i:hover {
  animation: rotate-btn .5s linear 3;
  -webkit-animation: rotate-btn .5s linear 3;
}

@keyframes rotate-btn {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(-360deg);
  }
}
2
Kyle

voici l'effet de rotation automatique et de zoom rotatif utilisant css3

#obj1{
    float:right;
    width: 96px;
    height: 100px;
    -webkit-animation: mymove 20s infinite; /* Chrome, Safari, Opera */
    animation: mymove 20s infinite;
    animation-delay:2s;
    background-image:url("obj1.png");
    transform: scale(1.5);
    -moz-transform: scale(1.5);
    -webkit-transform: scale(1.5);
    -o-transform: scale(1.5);
    -ms-transform: scale(1.5); /* IE 9 */
    margin-bottom: 70px;
}

#obj2{
    float:right;
    width: 96px;
    height: 100px;
    -webkit-animation: mymove 20s infinite; /* Chrome, Safari, Opera */
    animation: mymove 20s infinite;
    animation-delay:2s;
    background-image:url("obj2.png");
    transform: scale(1.5);
    -moz-transform: scale(1.5);
    -webkit-transform: scale(1.5);
    -o-transform: scale(1.5);
    -ms-transform: scale(1.5); /* IE 9 */
    margin-bottom: 70px;
}

#obj6{
    float:right;
    width: 96px;
    height: 100px;
    -webkit-animation: mymove 20s infinite; /* Chrome, Safari, Opera */
    animation: mymove 20s infinite;
    animation-delay:2s;
    background-image:url("obj6.png");
    transform: scale(1.5);
    -moz-transform: scale(1.5);
    -webkit-transform: scale(1.5);
    -o-transform: scale(1.5);
    -ms-transform: scale(1.5); /* IE 9 */
    margin-bottom: 70px;
}

/* Standard syntax */
@keyframes mymove {
    50% {transform: rotate(30deg);
}

<div style="width:100px; float:right; ">
    <div id="obj2"></div><br /><br /><br />
    <div id="obj6"></div><br /><br /><br />
    <div id="obj1"></div><br /><br /><br />
</div>

Voici le démo

1
M. Lak