27. 3D

Through some transform options and perspective we can trick the eye into simulating a depth effect. So far we have worked only with 2 axes: X and Y.

Now we will add depth with Z.

Allowing us to move forward or backward.

perspective

We indicate the distance between the user's plane and the background (Z axis).

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

perspective-origin

Indicates the position of the user relative to the background.

.grupo-de-elementos {
  perspective: 200px;
  /* Default */
  perspective-origin: center;
  /* Top centered */
  perspective-origin: top;
  /* Bottom left */
  perspective-origin: bottom left;
  /* Custom */
  perspective-origin: 300px 500px;
}

translateZ

Moves the element on the Z axis, negative numbers being a movement toward the background and positive ones forward.

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

.oveja-con-gafas {
  transform: translateZ(-10rem);
}

It is equivalent to using translate3d(0, 0, -10rem).

translate3d

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

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

It is equivalent to using translateX(-8rem) and transform: translateZ(-10rem).

rotateY

Rotates on the Y axis.

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

It is equivalent to using transform: rotate3d(0, 1, 0, 45deg).

rotateX

Rotates on the Y axis.

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

It is equivalent to using transform: rotate3d(1, 0, 0, 45deg).

rotate3d

Rotates on several axes proportionally.

.oveja-con-gafas {
  transform: rotate3d(1, 1, 1, 45deg);
}