Day 66: individual transform properties

From now on you can transform elements with the translate, rotate, and scale properties.

Let’s say you apply several transforms to an element, and on :hover and :focus you only want to change one of them, for example, scale.

<button>Transform</button>

button {
  transform: translateX(20px) rotate(15deg) scale(1); 
}

button:is(:hover, :focus) {
  transform: scale(2); 
}

That doesn’t work as expected because by setting transform: scale(2) you’re overwriting all the previously defined transforms. To fix that, you have to repeat the other transforms.

button {
  transform: translateX(20px) rotate(15deg) scale(1); 
}

button:is(:hover, :focus) {
  transform: translateX(20px) rotate(15deg) scale(2); 
}

That can cause a lot of repetition in your code.

Individual transform properties fix that issue because now you can use translate, rotate, and scale separately.

button {
  translate: 20px 0;
  rotate: 15deg;
  scale: 1; 
}

button:is(:hover, :focus) {
  scale: 2; 
}

<p>My blog doesn’t support comments yet, but you can reply via <a href=’mailto:blog@matuzo.at?subject=Comment%20on%20%E2%80%9CDay%2066%3A%20individual%20transform%20properties%E2%80%9D’>e-mail</a>.</p>