Tutorial!:Imagen con efecto giratoria


Holitas!
Bueno hoy les enseñaré a como hacer una imagen que gire
¿Que gire?:O Nunca vi eso
Si que gire!Yo tampoco :$  xD

Bueno aquí la vista previa!



Bueno le doy los créditos a:x

Bueno comenzemos!

Para plantillas Blogger: Apretamos CTRL+F y buscamos </style> y antes de ese código pegas:

Para plantillas blogskin/clasicas: Buscan ]]> </ b: skin> y antes de ese código pegas:

Esto es para que todas las imágenes se hagan circulo

img:hover{
-webkit-animation-name: MMCa2;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='0');}
@-moz-keyframes MMCa2 /* Firefox*/
{
{ -ms-transform:: translate(0px, 0px) rotate(0deg); }
 50% { -moz-transform:  translate(0px, 0px) rotate(360deg); }
}
@-ms-keyframes MMCa2 /* IE9*/
{
  0% { -ms-transform: translate( 0px, 0px) rotate(0deg); }
 50% { -ms-transform: translate( 0px, 0px) rotate(360deg); }
}
@-webkit-keyframes MMCa2 /* Safari and Chrome */
{
  0% { -webkit-transform: translate(0px, 0px) rotate(0deg); }
 50% { -webkit-transform: translate(0px, 0px) rotate(360deg); }
}
</style>


Para que solo las imagenes que quieres hagan el efecto copias en un Gadget HTML/JAVASCRIPT o Entrada o en donde lo vayas a pegar y pegas lo siguiente:

<img src="URL IMAGE" style="height: 400px; width: 400px;border-radius:9999px;" />
</div>


Editas y listo!

Ok mis linduras eso fué todo y bueno ya les seguiré trayendo más tutos etc!Besotes!

3 comentarios:

  1. me gusto muchisimo el tuto pero las imagenes que dan vuelta me marean XD

    ResponderEliminar

Hola! Si estas a punto de comentar me alegra mucho♥ Recuerda cumplir las reglas para evitar que borre tu comentario
~No digas malas palaras.
~No hagas SPAM.
~La afiliación se pide por la cbox o entrando en la pag de links
~Disfrutar porque es también tu lugar (^3^)/

HomeAfilieHelps 4 youPublicityLayouts Free