3D con CSS

En html5rocks nos enseñan como pasar del CSS 2D al 3D con un sencillo truco basándose en las nuevas posibilidades que nos da el CSS3. Claro está, que esto es solo compatible en los nuevos navegadores.

Un ejemplo para ganar perspectiva en una capa que contendrá una serie de elementos:

<div style="-webkit-perspective: 800; perspective: 800; margin: 100px 0 0 50px">

podemos añadir un iframe con su correspondiente efecto:

<iframe src="http://www.google.com/" style="-webkit-transform: rotate3d(0,1,1, 45deg)"></iframe>

quedando como resultado:

<div style="-webkit-perspective: 800; perspective: 800; margin: 100px 0 100px 50px">
    <iframe src="http://www.google.com/" style="-webkit-transform: rotate3d(0,1,1, 45deg); transform: rotate3d(0,1,1, 45deg);"></iframe>
</div>

También para que el efecto quede mas visible podemos crear una animación solo con estilos:

<style>
    #anim1 {
        -webkit-perspective: 800;
        perspective: 800;
        margin: 100px 0 100px 50px;
    }
    #anim1 iframe {
        -webkit-transition: -webkit-transform 1s ease-in-out;
        -webkit-transform: rotate3d(0,1,1, 45deg);
        transition: transform 1s ease-in-out;
        transform: rotate3d(0,1,1, 45deg);
    }
    #anim1 iframe:hover {
        -webkit-transform: rotate3d(0,0,1, 45deg);
        transform: rotate3d(0,0,1, 45deg);
    }
</style>

Repito esto solo se podrá visualizar en los nuevos navegadores. Podeis ver como funciona en 3D and CSS