26. 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

Crea un efecto hover en 3D cuando el usuario pase el ratón por encima de una imagen.

Actividad 2

Descarga las siguientes imágenes e intenta alcanzar el siguiente resultado.