Efecto de profundidad mediante CSS
La sintaxis CSS define una simulación de perspectiva desde la propiedad de perspective y un valor en px que representa la distancia desde el observador hacia un fondo ficticio (valor Z). Su relación es inversa: a más valor de perspectiva, mínima transformación; a menos perspectiva, más transformación.
Los elementos que serán afectados por esas propiedades serán los elementos hijos de un padre y casi siempre se complementa con la propiedad CSS transform.
Explico los fundamentos para eso en las siguientes tres imágenes. Atención: para los valores 3D de la propiedad 'transform:propiedad3d()' (la d en minúscula)
recomiendo estudiar
este vínculo
.
--A) El elemento padre tiene la regla CSS 'perspective: 0px;' y 'perspective-origin: 50% 50%;'. Este último centra la diagonal en el centro del elemento hijo.
Mientras que el elemento hijo contiene la regla 'transform: propiedad3d(0px, 0px, 0px...);'. Es decir, el padre define la perspectiva y el hijo el tipo de transformación 3D (junto con sus valores numéricos y ángulos) dentro de esa perspectiva:
En HTML
<div class="padre">
<div class="hijo">DUDU</div>
</div>
Por ahora los valores se definirán en cero. Adjunto un gráfico para explicación:
En CSS
Existen cuatro valores 3d (la d en minúscula) posibles para la propiedad transform:...();. Esta sección no los repasará uno a uno pero en la web existen cientos de recursos para entenderlo a profundidad. Adjunto un vínculo para una introducción.
- Valores de CSS
transform:propiedad3D(); en valores numéricos positivos o negativos: -
...matrix3d:
a1, b1, c1, d1,
a2, b2, c2, d2,
a3, b3, c3, d3,
a4, b4, c4, d4; -
...translate3d:movX, movY, movZ; -
...rotate3d:rotX, rotY, rotZ, valorNumericoTipoRotacion (ver ejemplos abajo); -
...rotate3d:rotX, rotY, rotZ, 0deg; -
...rotate3d:rotX, rotY, rotZ, 0turn; -
...rotate3d:rotX, rotY, rotZ, 0rad; -
...scale3d(X, Y, Z);
--B) Se define la perspectiva en el elemento padre. Eso le indicará al navegador la distancia máxima entre el observador a partir del elemento hijo y un ficticio fondo (hacia atrás).
En CSS
--C) Ya en el elemento hijo definimos la propiedad 'transform:...();' junto con alguno de los valores 3d. En este caso, ...'translate3d();' cuyo valor Zpx moverá el elemento hijo según un valor numérico (negativo o positivo).
En CSS
ATENCIÓN: Múltiples reglas transform:...();
Si es necesario agregar más de una regla CSS transform:...();, entonces deben ser agregadas desde una sola propiedad transform. Es decir:
En CSS
/* CORRECTO (SIN SEPARACIÓN DE COMAS) */
.hijo {
transform: translate3d(10px, 0px, -100px)
rotate3d(1, 1, 1, 45deg)
skew(10deg);
}
/* INCORRECTO */
.hijo {
transform: translate3d(0px, 0px, 0px);
transform: rotate3d(0, 0, 0, 0deg);
}
El resultado de lo anterior se muestra en lo siguiente:
Y un resultado animado con reglas de transform:..(); y perspective:...; sería: