How Do CSS Transforms Work?

.element {
  /* Move element */
  transform: translate(50px, 100px);
  transform: translateX(50px);
  transform: translateY(100px);

  /* Rotate element */
  transform: rotate(45deg);

  /* Scale element */
  transform: scale(1.5);
  transform: scale(2, 0.5);

  /* Skew element */
  transform: skew(10deg, 5deg);

  /* Combine transforms */
  transform: translate(50px) rotate(45deg) scale(1.2);
}

.element {
  transform-origin: center; /* default */
  transform-origin: top left;
  transform-origin: 50% 50%;
}

.element {
  transform: rotateX(45deg);
  transform: rotateY(45deg);
  transform: perspective(500px) rotateY(45deg);
}