CSSLab

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:

• CSS3 3D Transforms
• Understanding CSS 3D Transforms
• 3D Transforms