3D Transformations allow elements move on the third axis

Note: When rotate, the pivot is set to the center by default

.box:hover {
  /* 200px distance between object and the screen */
  /* move 50px away along z-axis, so it looks smaller. */
  transform: perspective(200px) translateZ(-50px);

  /* rotate along vertical axis */
  transform: perspective(200px) rotateY(45deg);
  /* set rotate pivot to (0, 0) */
  transform-origin: 0 0;
}

When try to rotate multiple elements, we need to wrap them with a new container and set its perspective property to a certain number.

.container {
  perspective: 200px;
}

.container:hover .box {
  transform: rotateY(45deg);
}