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