Rotar la hélice de una avioneta con CSS3

HTML
<div id="cont-avion">
    <img src="avion.png" id="avion">
    <img src="helice.png" id="helice">
</div>
CSS
#cont-avion{
    position:relative;
    width:400px;
    margin:0px auto;
}
#avion{
    width:100%;
}
#helice{
    position:absolute;
    top:105px;
    left:45px;
    transition: 4.5s ease;
     -moz-transition: 4.5s ease; /* Firefox */
     -webkit-transition: 4.5s ease; /* Chrome - Safari */
     -o-transition: 4.5s ease; /* Opera */
}
 
#helice:hover{
    transform : rotate(1440deg);
    -moz-transform : rotate(1440deg); /* Firefox */
    -webkit-transform : rotate(1440deg); /* Chrome - Safari */
    -o-transform : rotate(1440deg); /* Opera */
}

Autor: Rajesh

Publicado: 06/12/2018

Compartir Elemento Web

Donar a Compositu
Otras formas de ayudar
  • Compártelo en tus redes sociales.
  • Recomienda los elementos.
  • Regístrate Aquí
  • Deja tu comentario agradeciendo el aporte.

Descarga el código completo del Elemento Web y archivos necesarios (imágenes, librerias, plugins, frameword, etc)

Deja tu comentario