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>
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.
