Cómo hacer efectos con 3D CSS
Cómo hacer efectos con 3D CSS
Introducción
En este tutorial se va a tratar de guiarlo a través de los pasos para crear un efecto 3D, nubes basada en la cartelera. Hay unos pocos temas avanzados, sobre todo cómo las transformaciones 3D a través de las propiedades CSS trabajan.
1. Creación de un mundo y una cámara
En primer lugar, necesitamos dos div elementos: ventana gráfica y el mundo . Todo el resto de los elementos se crea de forma dinámica.
Viewport cubre toda la pantalla y actúa como el plano de la cámara.
Dado que en CSS 3D Transforma no hay ninguna cámara en sí misma , pensar en ella como una hoja de vidrio estática a través del cual se ve un mundo que cambia la orientación relativa a usted.
Moveremos todos nuestros objetos del mundo (o escena) en su interior, y eso es lo que va a ser transformada alrededor.
Mundial es un div que vamos a utilizar para anclar todos los elementos 3D. La transformación (rotar, trasladar o descamación) mundo va a transformar todos nuestros elementos.
Por razones de brevedad y de aquí en adelante, estoy usando las propiedades CSS sin prefijo.
Utilizar el prefijo del proveedor (webkit, -moz, -o, -ms, etc.) en su caso.
Todo esto es el margen de beneficio que necesitaremos:
< Div ID = "viewport" >
< div ID = "mundo" > </ div >
</ div >Estos son nuestros próxima dos definiciones CSS.
Es muy importante para centrar el div que contiene nuestra escena ( mundo en nuestro caso) en la ventana, o la escena que se representa con un desplazamiento! Recuerde que usted todavía está girando un elemento que se coloca dentro del documento, exactamente igual que cualquier otro elemento 2D.
#viewport {
fondo : 0 ;
izquierda : 0 ;
desbordamiento : oculto ;
perspectiva : 400 ;
posición : absoluta ;
derecha : 0 ;
top : 0 ;
}
#world {
height : 512 px ;
left : 50 % ;
margin-left : - 256 px ;
margin-top : - 256 px ;
position : absolute ;
top : 50 % ;
transform-style : preserve- 3 d ;
width : 512 px ;
}
Ahora un poco de código. Inicializamos nuestros objetos, enganche a la mousemove evento y definirupdateView () :
/ *
La definición de nuestras variables
mundo y ventana son elementos DOM,
worldXAngle y worldYAngle son flotadores que sostienen las rotaciones mundo,
d es un entero que define la distancia del mundo desde la cámara
* /
Var mundo = document.getElementById ( "mundo" ),
visor = document.getElementById ( 'ventana' ),
worldXAngle = 0 ,
worldYAngle = 0 ,
d = 0 ;
/ *
detector de eventos para transformar la posición del ratón en ángulos
-180-180 Degress, tanto vertical como horizontalmente
* /
Window.addEventListener ( 'mousemove' , la función (e) {
worldYAngle = - ( 0,5 - (e.clientX / window.innerWidth)) * 180 ;
worldXAngle = ( 0,5 - (e.clientY / window.innerHeight)) * 180 ;
updateView ();
});
/ *
Cambia la propiedad transform del mundo para ser
traducida en el eje Z de píxeles d,
girar en el eje X por grados y worldXAngle
gira en el eje Y por grados worldYAngle.
* /
Función updateView () {
world.style.transform = 'translateZ (' + d + 'px) \
rotateX ( ' + worldXAngle + ' deg) \
rotateY ( ' + + worldYAngle ' deg) ' ;
}
Mundo es de color rojo, ventana tiene un fondo CSS para simular el cielo, y no hay rueda deldetector de eventos para modificar la distancia de la cámara.
Mover el ratón y observe cómo el rojodiv cambia la orientación.
Aquí está el código que se ejecuta para este primer paso.
2. Adición de objetos a nuestro mundo
Ahora empezamos a añadir contenido 3D real. Añadimos un nuevo div que están situados en el espacio, con relación al mundo .
Es la adición de varios absoluto se refiere absoluta posicionado divcomo hijos de mundo , pero utilizando traducir en 3 dimensiones en vez de izquierda y superior .
Se centran en el centro del mundo de forma predeterminada.
La anchura y la altura no importan, ya que estos elementos son nuevos contenedores para las capas de nubes reales.
Para los productos básicos, que es mejor para centrarlos (estableciendo margin-left y margin-top a mitad negativa deanchura y altura ).
.cloudBase {
height : 20 px ;
left : 256 px ;
margin-left : - 10 px ;
margin-top : - 10 px ;
position : absolute ;
top : 256 px ;
width : 20 px ;
}
Añadimos generar () y createCloud () funciones para poblar el mundo .
Tenga en cuenta que random_ {var} no son variables reales pero los nombres de marcador de posición para el código real, que debe devolver un número aleatorio entre el rango especificado.
/ *
objetos es una matriz de base de las nubes
capas es una serie de capas de nubes
* /
Var objetos = [],
capas = [];
/ *
Borra el DOM de bases de nubes anteriores
y genera un nuevo conjunto de base de las nubes
* /
Función de generar () {
objetos = [];
capas = [];
si (world.hasChildNodes ()) {
tiempo (world.childNodes.length> = 1 ) {
world.removeChild (world.firstChild);
}
}
para ( var j = 0 ; j <; 5 ; j ++) {
objects.push (createCloud ());
}
}
/ *
Crea una única base de la nube: un div en el mundo
que se traduce de forma aleatoria en el espacio mundial.
Cada eje va de -256 a 256 píxeles.
* /
Función createCloud () {
var div = document.createElement ( 'div' );
div.className = 'base de las nubes' ;
var t = 'translateX (' + random_x + 'px) \
translateY ( ' + random_y + ' px) \
translateZ ( ' + random_z + ' px) ' ;
div.style.transform = t;
world.appendChild (div);
volver div;
}
Las bases de las nubes son cuadrados ligeramente rosados. Hay una p variables para que sea más fácil cambiar viewport.style.perspective .
Intente cambiar este valor y notar cómo se comporta igual que el campo de visión de nuestra cámara. Cuanto mayor sea este valor va, más la vista ortográfica pasa. Una vez más, tenga en cuenta que random_ {var} no son variables.
Aquí está el código que se ejecuta en este segundo paso.
3. Adición de capas para nuestros objetos
Ahora las cosas se ponen interesantes. Añadimos varias .cloudLayer-absolutos posicionado divelementos entre .cloudBase. Estos sostendrán nuestras texturas de nubes.
.cloudLayer {
height : 256 px ;
left : 50 % ;
margin-left : - 128 px ;
margin-top : - 128 px ;
position : absolute ;
top : 50 % ;
width : 256 px ;
}
El viejo createCloud () cambia un poco para agregar un número aleatorio de cloudLayers.
/ *
Crea una única base de las nubes y añade varias capas de nubes.
Cada capa de nubes tiene posición aleatoria (x, y, z), la rotación (a)
y la velocidad de rotación (s). capas [] realiza un seguimiento de los divs.
* /
Función createCloud () {
var div = document.createElement ( 'div' );
div.className = 'base de las nubes' ;
var t = 'translateX (' + random_x + 'px) \
translateY ( ' + random_y + ' px) \
translateZ ( ' + random_z + ' px) ' ;
div.style.transform = t;
world.appendChild (div);
para ( var j = 0 ; j < 5 + Matemáticas .round ( Matemáticas .random () * 10 ); j ++) {
var nube = document.createElement ( 'div' );
cloud.className = 'CloudLayer' ;
cloud.data = {
x: random_x,
y: random_y,
z: random_z,
R: random_a,
s: random_s
};
var t = 'translateX (' + random_x + 'px) \
translateY ( ' + random_y + ' px) \
translateZ ( ' + random_z + ' px) \
rotateZ ( ' + random_a + ' deg) \
escala ( ' + random_s + ') ' ;
cloud.style.transform = t;
div.appendChild (nube);
layers.push (nube);
}
volver div;
}
Aquí está el código que se ejecuta el tercer paso.
Las capas de nubes son de color azul y tienen un borde blanco, para que sean muy visibles. Mover el ratón para notar cómo cada capa se coloca y se hace girar.
4. Hacer que el efecto 3D
Aquí es donde sucede la magia.
Tenemos capas [] que contiene una referencia para todos los sprites de una sola capa en nuestro mundo, y tenemos worldXangle y worldYAngle , que son la parte de la rotación de la transformación aplicada a nuestro mundo.
Si aplicamos la rotación opuesta a todos y cada capa, estamos efectivamente realinear a la ventana gráfica:.
Tenemos una cartelera Desde que hemos rotado el mundo por primera vez en X y en Y, tenemos que girar cada capa de la de manera opuesta: primero y y luego X.
El orden de las transformaciones es muy importante . Si no se aplican en el orden correcto sus elementos estarán orientados de forma incorrecta!
/ *
Iterar capas [], actualizan la rotación y aplican la
Actualmente transformación inversa aplicada al mundo.
Note el orden en el que se aplican las rotaciones.
* /
Función de actualización () {
para ( var j = 0 ; j <layers.length; j ++) {
var capa capas = [j];
layer.data.a + = layer.data.speed;
var t = 'translateX (' + layer.data.x + 'px) \
translateY ( ' + layer.data.y + ' px) \
translateZ ( ' + layer.data.z + ' px) \
rotateY ( ' + (- worldYAngle) + ' deg) \
rotateX ( ' + (- worldXAngle) + ' deg) \
escala ( ' + layer.data.s + ') ' ;
layer.style.transform = t;
}
requestAnimationFrame (actualización);
}
Mover el ratón alrededor y verá que las capas de nubes (azul) son ahora las carteleras (que siempre se enfrentan a la cámara / ventana), mientras que el mundo y cada base de las nubes siguen siendo proyectada en 3D.
Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros