Oil Smoothness

transform is the holy grail of CSS animations.

1. Why Not Margin/Top/Left?

Changing top or margin forces browser to recalculate entire layout (Layout/Reflow). This is slow. Changing transform happens on a separate layer and is executed by graphics card.

2. 3D Capabilities

perspective: scene depth.
rotateY() / rotateX(): rotation in space.
translate3d(x, y, z): fastest way to move.

Important

The will-change: transform property tells browser in advance: " This block will move soon, prepare graphics card " . Use it carefully, only for complex animations.

.card {
  transition: transform 0.6s;
  transform-style: preserve-3d;
}
.card:hover {
  transform: rotateY(180deg); /* Card flip effect */
}