Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Aprende Web

Crea y diseña tus sitios en la Web.

Animacion en CSS3

Realizar animaciones en la página es muy fácil con CSS3

Y ahora tambien aprende a programar en C++ con Aprende Web C++

Manuales para la creación y diseño de páginas web

RSS. Suscribir canal.

Este obra está bajo una licencia de Creative Commons Reconocimiento-NoComercial 4.0 Internacional.

Animación en CSS3 (VIII)

Animación 3D

Métodos de transform

Podemos hacer animaciones en tres dimensiones a partir de algúnos métodos de transform. El proceso es igual que en el resto de animaciones.

Los métodos de transform para 3D sólo están disponibles de forma experimental en los navegadores Safari, Chrome y Opera, los tres utilizan el prefijo -webkit- (marzo 2014). Tanto Firefox como Internet Explorer no tienen disponibles los métodos de 3D. Veamos cuáles son estos métodos.

traslación

El método translate() en 3D adquiere la forma:

transform: translate3d(<medidaX>,<medidaY>,<medidaZ>);

Es decir, le añadimos las letras "3d" y también un parámetro más, que es el que corresponde al eje Z o de profundidad.

A los métodos translateX() y translateY se añade también el método:

transform: translateZ(<medidaZ>);

El cual indica la transformación en el eje Z o de profundidad.

Escalado

El método scale sigue los mismos pasos que el anterior para sus propiedades en 3D; es decir le añadimos las letras "3d" y un parámetro más:

transform: scale3d(<numX>,<numY>,<numZ>);

Como en la traslación también tenemos el método:

transform: scaleZ(<numZ>)

El problema del escalado en 3D es que los elementos de la página son planos, y no tienen volumen, por lo que si su grosor es 0, cualquier proporción que intentemos aplicarle seguirá siendo 0. Esto hace que aunque la propiedad funcione, en la práctica no puede hacersele funcionar.

Sesgado

El sesgado o método skew() no puede ser aplicado en 3D, por lo que no hay ningún método adicional de 3D para el sesgado.

Rotación

La rotación es el método que más variaciones tiene en 3D, ya que permite rotar un elemento en los tres ejes del plano, por lo tanto tenemos:

transform: rotateX(<angulo>);

El elemento gira respecto a un eje X horizontal.

transform: rotateY(<angulo>);

El elemento gira respecto a un eje Y vertical.

transform: rotateZ(<angulo>);

El elemento gira respecto a un eje Z de profundidad. En este caso tenemos la misma rotación que en dos dimensiones.

También tenemos el método rotate3d(), que en este caso varía un poco de los anteriores, ya que tiene 4 parámetros.

transform: rotate(<numX>,<numY>,<numZ>,<angulo>);

Los tres primeros parámetros son números que indican un vector en el espacio: en un eje de coordenadas del espacio, (X,Y,Z), los tres primeros números crean un vector que marca una línea recta en el espacio. Esa línea será el eje sobre el cual el elemento se inclinará los grados marcados en el cuarto parámetro.

En el siguiente enlace se muestra una página de ejemplo con varios elementos con rotación en 3D. Debes abrir la página con Opera, Safari o Chrome para ver las animaciones.

Rotaciones 3D

Matrix

El método matrix también tiene su forma en 3D es el método matrix3d() el cual tiene 16 parámetros que se corresponden con una matriz de 4 x 4:

transform: matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n);

Por la complejidad y dificultad que tiene usar este método no nos extenderemos más sobre él; ya que podemos obtener los mismos resultados combinando varias transformaciones en un mismo elemento.

Perspectivas

Podemos poner perspectiva en uno o varios elementos mediante una serie de propiedades. Veamos la propiedad perspective:

perspective: 300;

Esta es una propiedad 3D, y al igual que las transformaciones 3D y sólo funciona con los navegadores Safari, Chrome y Opera con el prefijo -webkit-:

-webkit-perspective: 300;

El selector no debe apuntar al elemento que tiene la perspectiva, sino a su elemento padre. Es decir la perspectiva la tendran los elementos hijos del elemento al que apunta el selector.

Por otra parte, para poder ver la perspectiva, el elemento debe tener una inclinación respecto al plano de la pantalla, Debemos rotar el elemento con rotateX() o rotateY()para que tenga una cierta profundidad.

Por otra parte también podemos decidir cual es el punto de origen de la perspectiva, o punto al que se dirigirán todas las líneas de profundidad. para ello tenemos la propiedad:

perspective origin: <valorX>,<valorY>;

Al igual que la anterior esta propiedad debe aplicarse al elemento padre de aquellos que adquieren la perspectiva. Tiene dos valores que se corresponden con las coordenadas del punto de origen de la perspectiva. Los posibles valores son; para <valorX> : una medida, un porcentaje, o las palabras clave left | center | right ; para <valorY> : una medida, un porcentaje, o las palabras clave top | center | bottom .

El punto de origen se calcula en el mismo elemento padre, aunque la perspectiva la tienen los elementos hijos. veamos un ejemplo: El código HTML será el siguiente:

<div id="cont1" style="font: normal 12px 'courier new';">
 perspective: 200;<br/>
 perspective-origin: center,top;
<div id="capa1">transform: rotateX (45deg)</div>
</div>

Y el código CSS será el siguiente:

#capa1 { width: 100px; height: 100px; margin: 50px; position: relative;  
      background: fuchsia; border:2px solid navy;  border-radius: 10px;
      transform: rotateX(45deg);
      -webkit-transform: rotateX(45deg);
      }
#cont1{ width: 200px; height: 200px; margin: 50px; 
       border:1px solid black;  float: right;
       perspective: 200;
       perspective-origin: center top; 
       -webkit-perspective: 200;
       -webkit-perspective-origin: center top; 
       }

El resultado sólo se puede ver en los navegadores Safari, Chrome o Opera; sin embargo aquí hemos puesto una imagen copiada de uno de estos navegadores, para que se pueda ver en todos.

Otras propìedades 3D

Propiedad transform-origin

La propiedad transform-origin ya vista en páginas anteriores, puede admitir también un tercer parámetro para el eje Z o de profundidad.

transform-origin:<valorX> <valorY> <valorZ>;

El "valorX" y el "valorY" son los ya vistos en páginas anteriores, el "valorZ" debe ser una medida.

Propiedad transform-style

La propiedad transform-style indica si los elementos hijos de un elemento en 3D conservan también su posición en 3D:

transform-style: flat | preserve-3d;

Sus dos posibiles valores son flat (valor por defecto): los elementos hijos no conservan la posicion 3d; y preserve-3d: los elementos hijos sí conservan la posición 3d.

Propiedad backface-visibility

La propiedad backface-visibility indica si el elemento al rotar hará visible su cara posterior:

backface-visibility: visible | hidden.

Sus dos posibles valores son visible y hidden. visible es el valor por defecto, e indica que sí veremos la cara posterior. hidden indica que no se verá la cara posterior.

Estas propiedades, al igual que las anteriores, sólo están disponibles en los navegadores Safari, Chrome y Opera con el prefijo -webkit-.

Aquí acaba el manual de animación CSS. La animación CSS está todavía en fase experimental, por lo que puede que en un futuro tenga variaciones. Procuraremos estar al tanto para poder incorporarlas. y recuerda, cualquier duda o comentario, podeis mandarlo a aprendeweb@aprende-web.net.

Acabado en Noviembre 2011. Última revisión: Marzo 2014.

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com