New Standard

Previously we had to write transform: translate(10px) rotate(45deg) scale(1.2). If we wanted to change only rotation on hover, we had to rewrite the entire line.

Standalone Properties

Now in modern browsers there are separate properties:

• translate: 10px 20px;
• rotate: 45deg;
• scale: 1.5;

.box {
  translate: 100px 0;
  rotate: 10deg;
  transition: rotate 0.3s;
}
.box:hover {
  rotate: 45deg; /* We don't need to write translate again! */
}