Rotar una imagen 360º con CSS

Hoy voy a dejar un sencillo código CSS que sirve para rotar una imagen 360º con CSS3 (que, por cierto, uso en esta web en portada), pero que resulta bastante curioso y es muy fácil de implementar.

.rotate{
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;
     
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
     
    overflow:hidden;
 
    }   
 
.rotate:hover   
{ 
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg); 
    -o-transform:rotate(360deg);
}

 


Autor del artículo Miguel Angel del Toro Medina

Como siempre, podéis contar con mis servicios de diseño y programación web. Contactad conmigo a través de info@madeltoro.es.