Girar o rotar una imagen en hover

Question

Girar o rotar una imagen en hover

Quiero averiguar cómo hacer una imagen girando o girando cuando se cierne sobre ella. 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" />

41

css css3 css-transitions hover css-transforms

Author: web-tiki, 2014-05-16

Source

4 answers

Es muy simple.

Agregas una imagen.

Se crea una propiedad css para esta imagen.

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

Se agrega una animación como esa:

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

4

Author: s0h3ck,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-06-16 19:21:16

Si desea rotar elementos en línea, primero debe establecer el elemento en línea 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);
  }
}

2

Author: Kyle,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-06-16 19:22:33

Aquí está el efecto de giro automático y 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

1

Author: M. Lak,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-06-16 19:19:06

score 99 · Accepted Answer

Puede usar transiciones de CSS3 con rotate() para girar la imagen al pasar el cursor.

Imagen giratoria:

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" />

Aquí hay un violín DEMO

Más información y referencias :

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