TIL individual transform CSS

POSTED ON: Feb 11, 2023

TAGS: transform css

We now have individual transform CSS!

Currently, in order to apply transforms, you do something like this:

div {
  /* These transform functions are applied from left to right. */

  transform: translate(50%, 0) scale(1.5);
}

.square {
  /* scale -> translate */
  transform: scale(1.5) translate(50%, 0);
}

By moving these into individual transforms, they look like this and follow a execution order.

div {
  /* Follows a pattern: translate -> rotate -> scale */
  translate: 50% 0;
  scale: 1.5;
}

.square {
  /* translate -> scale */
  translate: 50% 0;
  scale: 1.5;
}

To ensure support, you would use:

@supports (translate: 0) {
  /* Use `translate` */
}

@supports not (translate: 0) {
  /* Use `transform: translate()` */
}

via Order in CSS transformations – transform functions vs individual transforms

Related TILs

Tagged: transform

• Next: TIL Dirty bit systems in browsersIn order not to do a full layout for every small change, browsers use a 'dirty bit' system. A renderer that is changed or added marks itself and its children as 'dirty': needing layout. There are two flags: 'dirty', and 'children are dirty' which means that although the renderer itself may be OK, it has at least one child that needs a layout.
• Previous: TIL Web Performance with JavascriptOverall, we should be loading the most important JS first to get the website working. Then load all your third-party scripts onto your web worker, which then responds with 'Success' once it loads, so you can then interact with it.