#textoStarwars{

color: #ebe41c;

font-size: 18px;

width: 100%;

-moz-transform-origin: 100px 200px;

-moz-animation: movimientoTexto 10s linear infinite;

-webkit-transform-origin: 100px 200px;

-webkit-animation: movimientoTexto 10s linear infinite;

-ms-transform-origin: 100px 200px;

-ms-animation: movimientoTexto 10s linear infinite;

transform-origin: 100px 200px;

animation: movimientoTexto 10s linear infinite;

}

#contenedorTexto{

background: #000;

padding: 0 20px 0 20px;

width: 300px;

height: 200px;

margin-left: auto;

margin-right: auto;

overflow: hidden;

-moz-perspective: 500px;

-moz-perspective-origin: 100px 200px;

-webkit-perspective: 500px;

-webkit-perspective-origin: 100px 200px;

-ms-perspective: 500px;

-ms-perspective-origin: 100px 200px;

perspective: 500px;

perspective-origin: 100px 200px;

}

@-moz-keyframes movimientoTexto {

0% { -moz-transform: rotateX(45deg) translateY(300px); }

100% { -moz-transform: rotateX(45deg) translateY(-400px); }

}

@-webkit-keyframes movimientoTexto {

0% { -webkit-transform: rotateX(45deg) translateY(300px); }

100% { -webkit-transform: rotateX(45deg) translateY(-400px); }

}

@-ms-keyframes movimientoTexto {

0% { -ms-transform: rotateX(45deg) translateY(300px); }

100% { -ms-transform: rotateX(45deg) translateY(-400px); }

}

@keyframes movimientoTexto {

0% { transform: rotateX(45deg) translateY(300px); }

100% { transform: rotateX(45deg) translateY(-400px); }

}

TRANSFORMACIÓN DE TEXTO

Este texto se desplaza por la pantalla utilizando una animación y una transformación en 3D. Emulando el inicio de las películas de la Guerra de las Galaxias con una rotación del eje x y un desplazamiento en el eje Y. Ya hemos visto en entradas anteriores como manejar animaciones CSS. Combinando estas animaciones con efectos 3D y un poco de estilado e imaginación es fácil hacer un efecto similar al de los letreros de inicio de las películas de la guerra de las galaxias.
El estilado es bastante básico, dos cuadrados, uno será el fondo, de un ancho fijo y fondo negro, centrado. El otro será donde esté el texto que se desplace sobre el primero, texto amarillo.
Tenemos que hacer una animación que mueva el texto verticalmente pero hacia el fondo, eso lo hacemos con un giro de 45 grados respecto al eje X. Aunque el giro es fijo (siempre 45 grados), debemos especificar este giro en los fotogramas clave de la animación, ya que forman parte de la misma propiedad CSS: transform. Aunque dentro de esa propiedad, deseemos que la rotación sea fija y la traslación sea la que se anime, hay que especificar ambas como parte de la animación, o la animación sobre-escribirá la propiedad que hayamos puesto fija. Supongo que esto sucede así, porque aunque lo especifiquemos como transformaciones independientes, en realidad realiza la interpolación de la animación sobre la matriz de transformación.
Especificamos los parámetros para que quede bien, como punto de perspectiva, la duración de la animación y que se repita infinitamente, y ya está. Este ejemplo (con prefijos) funcionará en Firefox, Chrome y Safari en sus últimas versiones. En Internet Explorer cuando salga la versión 10. Por ahora Opera no soporta las transformaciones 3D, la parte de animación funcionará, supongo que el texto simplemente subirá, sin sensación de profundidad.
El código completo es:
TRANSFORMACIÓN DE TEXTO
Este texto se desplaza por la pantalla utilizando una animación y una transformación en 3D. Emulando el inicio de las
películas de la Guerra de las Galaxias con una rotación del eje x y un desplazamiento en el eje Y.