Lección 22: 3D
A través de algunas opciones de transform
y de perspective
podemos engañar al ojo para simular un efecto de profundidad. De momento hemos trabajado solo con 2 ejes: X
y Y
.
Ahora añadiremos profundidad con Z
.
Permitiendo mover hacia delante o atrás.
perspective
Indicamos la distancia entre el plano del usuario el fondo (eje Z).
.grupo-de-elementos {
perspective: 200px;
}
perspective-origin
Indica la posición del usuario respecto al fondo.
.grupo-de-elementos {
perspective: 200px;
/* Por defecto */
perspective-origin: center;
/* Arriba centrado */
perspective-origin: top;
/* Abajo izquierda */
perspective-origin: bottom left;
/* Personalizado */
perspective-origin: 300px 500px;
}
translateZ
Mueve el elemento en el eje Z, siendo los números negativos un movimiento hacia el fondo y los positivos adelante.
.grupo-de-elementos {
perspective: 200px;
}
.oveja-con-gafas {
transform: translateZ(-10rem);
}
Es esquivalente a usar translate3d(0, 0, -10rem)
.
translate3d
.grupo-de-elementos {
perspective: 200px;
}
.oveja-con-gafas {
transform: translate3d(-8rem, 0, -10rem);
}
Es esquivalente a usar translateX(-8rem)
y transform: translateZ(-10rem)
.
rotateY
Rota sobre el eje Y.
.oveja-con-gafas {
transform: rotateY(45deg);
}
Es esquivalente a usar transform: rotate3d(0, 1, 0, 45deg)
.
rotateX
Rota sobre el eje Y.
.oveja-con-gafas {
transform: rotateX(45deg);
}
Es esquivalente a usar transform: rotate3d(1, 0, 0, 45deg)
.
rotate3d
Rota sobre varios ejes de forma proporcional.
.oveja-con-gafas {
transform: rotate3d(1, 1, 1, 45deg);
}
Actividad 1
Descarga las siguientes imágenes e intenta alcanzar el siguiente resultado.
Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial-SinDerivadas 4.0 Internacional.
¿Me ayudas?
No te sientas obligado a realizarme una donación, pero cada aportación me ayuda a mantener el sitio en activo para que continúe existiendo y me motiva a continuar creando nuevo contenido.

- 1 café: Se mantiene el dominio durante 4 meses.
- 2 cafés: Se liquida 1 mes del Servidor Web.
- 3 cafés: Se paga 1 mes de Newsletter.
Comentarios
Nuevo comentario
Nueva replica {{ formatEllipsisAuthor(replyComment.author) }}
Escribe el primer comentario
{{ comments.length }} comentarios