css - rotar - pasar el mouse en html

Girar o girar una imagen al pasar el mouse

Question

Quiero saber cómo hacer una imagen girando o giratoria cuando está suspendida. Me gustaría saber cómo emular esa funcionalidad con CSS en el siguiente código:

img {
  border-radius: 50%;
}

<img src="http://i.imgur.com/3DWAbmN.jpg" />

Answer 1

Es muy sencillo.

1. Agrega una imagen.

2. Usted crea una propiedad css para esta imagen.

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

3. Agregas una animación como esa:

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

Answer 2

Puede usar transiciones CSS3 para girar la imagen al pasar el mouse .

Imagen giratoria:

DEMO

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="http://i.imgur.com/3DWAbmN.jpg" />

Más información y referencias:

• una guía sobre las transiciones CSS en MDN
• una guía sobre CSS se transforma en MDN
• tabla de soporte del navegador para 2d transformaciones en caniuse.com
• tabla de soporte del navegador para transiciones en caniuse.com

Answer 3

aquí está el giro automático y el efecto de zoom giratorio usando 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>

Aquí está la demo

Answer 4

si desea rotar elementos en inline-block primero debe establecer el elemento en inline-block en 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);
  }
}