Lección 21: 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.

Sin eje Z

Ahora añadiremos profundidad con Z.

Con ejes

Permitiendo mover hacia delante o atrás.

Con eje Z

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);
}
Oveja zombie negra Oveja zombie negra

Es esquivalente a usar translate3d(0, 0, -10rem).

translate3d

.grupo-de-elementos {
  perspective: 200px;
}

.oveja-con-gafas {
  transform: translate3d(-8rem, 0, -10rem);
}
Oveja zombie negra Oveja zombie negra

Es esquivalente a usar translateX(-8rem) y transform: translateZ(-10rem).

rotateY

Rota sobre el eje Y.

.oveja-con-gafas {
  transform: rotateY(45deg);
}
Oveja zombie negra Oveja zombie negra

Es esquivalente a usar transform: rotate3d(0, 1, 0, 45deg).

rotateX

Rota sobre el eje Y.

.oveja-con-gafas {
  transform: rotateX(45deg);
}
Oveja zombie negra Oveja zombie negra

Es esquivalente a usar transform: rotate3d(1, 0, 0, 45deg).

rotate3d

Rota sobre varios ejes de forma proporcional.

.oveja-con-gafas {
  rotate3d(1, 1, 1, 45deg);
}
Oveja zombie negra Oveja zombie negra

21-1

¿Te ayudo?

  • 1 café: ¡Gracias por el apoyo! Te ayudo a que esta web siga estando online pagando los servidores.
  • 2 cafés: Respondo a una duda en los comentarios.
  • 4 cafés: Te corrijo una actividad y te envío feedback.
Comprame un café

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

Nueva replica  {{ formatEllipsisAuthor(replyComment.author) }}

Acepto la política de Protección de Datos.

Escribe el primer comentario