Day 66: individual transform properties

posted on December 26., 2022

It’s time to get me up to speed with modern CSS. There’s so much new in CSS that I know too little about. To change that I’ve started #100DaysOfMoreOrLessModernCSS. Why more or less modern CSS? Because some topics will be about cutting-edge features, while other stuff has been around for quite a while already, but I just have little to no experience with it.

---

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; 
}

See on CodePen.

Further reading

• Finer grained control over CSS transforms with individual transform properties

Want more?

1. Previous post: Day 65: using the em unit in container queries

Overview: 100 Days Of More Or Less Modern CSS

My blog doesn't support comments yet, but you can reply via e-mail.