Experimento: rotación oblícua con CSS3

17/Abr/2012 15952

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. TURNKEY DROP SHIPPING BUSINESS [#]

    Ӏ waѕ able tߋ find good information from your artiсles.

    Also visit my page – TURNKEY DROP SHIPPING BUSINESS

CSSLab