Experimento: rotación oblícua con CSS3

17/Abr/2012 9731

Sólo quería probar cómo a partir de un elemento-caja, lograba girarlo 45º y rotarlo al mismo tiempo. No sé qué uso práctico pueda tener, pero dejo el código resumido para que lo estudien ya que no fue fácil (todo lo que sean sombras, gradientes lo pueden ver en el source del ejemplo final).

El HTML es una imagen común y corriente:

<img src="http://www.be-studios.com/tests/foto_diegol.jpg" />

Pero la magia está en la animación con CSS3:

@-webkit-keyframes girando {
   0%   { transform: rotate(45deg) rotate3d(1,1,0,0deg);   }
   25%  { transform: rotate(45deg) rotate3d(1,1,0,90deg);  }
   50%  { transform: rotate(45deg) rotate3d(1,1,0,180deg); }
   75%  { transform: rotate(45deg) rotate3d(1,1,0,270deg); }
   100% { transform: rotate(45deg) rotate3d(1,1,0,360deg); }
}
   img {
      position: absolute;
      top: 20%;
      left: 30%;
      animation: girando linear infinite 2s;
      transform-style: preserve-3d;
   }

Ver ejemplo

Ver Gist en Dabblet

Adelante, puedes ver cómo funciona en tu celular ⬇

Links:

Comentarios

  1. cheap tadalafil online canada [#]

    I am really grateful to the owner of this website
    who has shared this wonderful post at at this place. http://www.deinformedvoters.org/tadalafil-price

  2. Nmlprq [#]

    plx ed pills – black panther ed pills new ed pill dr oz

  3. indian cialis [#]

    where can i get generic cialis indian cialis how to buy
    cialis in australia http://www.tadalafill.online/

  4. fda warning on hydroxychloroquine [#]

    fda warning on hydroxychloroquine http://hydroxychloroquined.online/

  5. bimatoprost cost [#]

    careprost buy online usa bimatoprost cost bimatoprost ophthalmic solution cost http://carepro1st.com/

  6. hydroxychloroquine prescribing information [#]

    hydroxychloroquine prescribing information http://hydroxychloroquined.online/

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

CSSLab