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][1]:

@-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][2]{.verejemplo}

Ver Gist en Dabblet

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

[1]: http://www.csslab.cl/2011/06/21/animaciones-css3-avanzadas/ “Enlace en CSSLab a “Animaciones CSS3 avanzadas”” [2]: http://www.csslab.cl/ejemplos/css3rotacionoblicua/ “Enlace en CSSLab a “Ejemplo rotación oblícua con CSS3"”