Las 3D Transformaciones son un aspecto de CSS3 que tienden a no trabajar bien en el navegador: si la transformación 3D. Debemos considerar cuidadosamente como hacerlo y que elementos usar para presentarse en navegadores antiguos


Aunque pueden usarse como tales , CSS tranforms 3D no esta destinados a hacer de los sitios web un “entorno 3D ” en el que la ventana del navegador hace girar entre una página y otra. Más bien, las nuevas propiedades se utilizan normalmente tanto como se utiliza el resto de CSS : para tomar decisiones de presentación para algunos elementos de una página web. Creación e interactuar con los “mundos” así que para el entorno 3D es mejor dejar al contexto del elemento canvas , a través de tecnologías como WebGL .
La clave para la transformación de los elementos HTML en el espacio 3D es la perspectiva “PERSPECTIVE” , que se puede especificar como una propiedad CSS .
importante : Tenga en cuenta la propiedad perspectiva no afecta cómo se representa el elemento ; simplemente permite crear un espacio 3D.Esta es la principal diferencia entre la transform: perspective ( ) y la propiedad perspectiva. El primero da profundidad elemento mientras que el segundo crea un espacio 3D compartida por todos sus hijos transformadas.

[codepen_embed height=”600″ theme_id=”22281″ slug_hash=”qbwOGo” default_tab=”result” user=”fmorenor”]See the Pen Starwars intro by Francisco Moreno (@fmorenor) on CodePen.[/codepen_embed]

La propiedad de transform-style especifica cómo los elementos anidados son renderizados en el espacio 3D.

<head>
	<meta charset="UTF-8">
	<title>3D CSS</title>
    <link rel="stylesheet" href="css/normalize.css" />
</head>
<style>
	body { perspective: 1200px; perspective-origin: center center; margin: 2rem; }
	img { width: 500px; height: 375px; float: left; margin-right: 2rem; margin-bottom: 2rem; 
	   transition: 1s all linear; }
	img {  width: 300px; height: 300px; margin: 30px; }
	img:hover{transform: rotateY(185deg);}
</style>
<body>
	<img src="images/foto.jpg" alt="pelicano">
	
</body>
</html>

Captura de pantalla 2015-01-30 a las 20.35.08

Si el elemento se gira alrededor de más de un eje a la vez, por lo general es más efectivo usar el atajo ROTATE3D 

img { transformar : ROTATE3D ( 0 , 1 , 0 , 45 grados ); }

Usted puede pensar en ROTATE3D como un multiplicador de matriz para cada uno de los ejes ( x, y, z) : si alguna de las tres primeras ranuras tiene ningún tipo de valor numérico , el elemento será giradas por el último valor en torno a los ejes correspondientes. Por ejemplo, la declaración anterior será girar una imagen 45 grados alrededor del eje y. Puede combinar múltiples rotaciones encendiendo bits para varios ejes :

img { transformar : ROTATE3D ( 1 , 1 , 0 , .15turn ); }

Translate.

Los elementos en 3D también se pueden mover a lo largo de los ejes X, Y, y Z . Teniendo en cuenta que al hacerlo se mueve el elemento hacia o más lejos de su punto de fuga , esro es que si el elemento se gira alrededor de la ejes X o Y o se mueve a lo largo del eje Z.

Ahora haremos una similitud del Texto de inicio de Starwars para hacer la Demostración.

<style>

@-webkit-keyframes crawl {
  /* axis management until it disappears */
  0% { -webkit-transform:rotateX(40deg) translateY(1100px);opacity:1;}
  40% { -webkit-transform:rotateX(40deg)  translateY(-340px);opacity:1;}
  80% { -webkit-transform:rotateX(40deg) translateY(-1780px);opacity:0;}
  100% { -webkit-transform:rotateX(40deg) translateY(-2500px);opacity:0;}}

body { background: #000; perspective: 700px; }

#crawl { width: 80%; text-align: center; color: #fff;
font-family: 'Franklin Gothic Medium', sans-serif;
font-size: 4rem; margin: 0 auto;
transform: rotateX(40deg);
-webkit-transform: translateY(−200px);
-webkit-animation: crawl 30s linear;
animation: crawl 30s linear 4s infinite; 
}

</style>
<body>
<div id="crawl">
<h1>STAR WARS</h1>
<p>The waves of grain moved like the surface of the ocean under the light of the moon, stirred
faintly by a susurrus of wind from the east. Caleb hoisted the worn wooden shaft of a scythe
over his shoulder and peered out into the darkness, dirt-grimed thumbnail scratching under the
brim of his straw hat, just above the sun-seared terminator of skin.</p>
</div>
</body>

En una Proxima les mostrare como hacer  toda la introducción de Starwars con todo y Musica,  con CSS y HTML5,  me creerán que esto es el equivalente para mi de armar un rompecabezas.
Captura de pantalla 2015-01-30 a las 20.53.13