Firefox 72: Individual CSS Transform Properties

New in Firefox 72 is the ability to individually define CSS Transform Properties. You can now separately define scale, rotate, and translate CSS properties, instead of having to chuff them all into one single transform property.

The translate, rotate, and scale properties allow authors to specify simple transforms independently, in a way that maps to typical user interface usage, rather than having to remember the order in transform that keeps the actions of transform(), rotate() and scale() independent and acting in screen coordinates.

element {
  scale: 2;
  rotate: 30deg;
  translate: -50% -50%;
}

The order that they are applied is, as per CSS Transforms Level 2 spec, first translate, then rotate, and then scale — not the order which you define them in.

By having individual transform props, this also means that we can animate and transition them separately.

@keyframes individual {
  50% {
    translate: 0 50%;
  }
  75% {
    scale: 1;
  }
}
element {
  transition:
    rotate 200ms ease-in-out,
    scale 500ms linear;
}

element:hover {
  scale: 2;
  rotate: -3deg;
}

Here’s a pen demonstrating its usage:

See the Pen
Individual CSS Transform Properties Demo
by Bramus (@bramus)
on CodePen.

In Chrome these new props are still behind the #enable-experimental-web-platform-features feature flag.

~

Did this help you out? Like what you see?
Thank me with a coffee.

I don't do this for profit but a small one-time donation would surely put a smile on my face. Thanks!

☕️ Buy me a Coffee (€3)

To stay in the loop you can follow @bramus or follow @bramusblog on Twitter.

Mocking Individual CSS Transform Functions using CSS Variables

In CSS we use the transform property to manage an element’s translation, rotation, and scale. As it’s one single combined property for all three possible transformations, setting transform: rotation(90deg); on an element will (re)set the values for translation and scale by falling back to their default values.

This will change when the “CSS Transform Module Level 2” spec will be approved and implemented (currently already partly in Chrome Canary), as it introduces separate properties for each possible transformation:

The translate, rotate, and scale properties allow authors to specify simple transforms independently, in a way that maps to typical user interface usage, rather than having to remember the order in transform that keeps the actions of translate(), rotate() and scale() independent and acting in screen coordinates.

Dan Wilson created a nice demo to already use this kind of behavior today, with the help of CSS Variables. Initially the CSS transform is set to the default values using this snippet:

:root {
  --tx: 0;
  --ty: 0;
  --scale: 1;
  --deg: 0deg;
}

el {
  transform: 
    translate3d(calc(var(--tx) * 1vw), calc(var(--ty) * 1vh), 0) 
    scale(var(--scale)) 
    rotate(var(--deg));
}

As the transformation property values are linked to the CSS variables you can now change them individually – be it in CSS or via JS – just like the “CSS Transform Module Level 2” allows one to do.

Not entirely familiar with CSS Variables? CSS Variables: var(–subtitle); is a good video/presentation to get you started.

Here’s a demo that uses JS to change the individual values:

A Trick: Individual CSS Transform Functions →

3D First Person Shooter … with CSS

css-fps

With CSS transforms we can’t define arbitrary shapes using a set of points, we’re stuck with HTML elements which are always rectangular and have two dimensional properties such as top, left, width and height to determine their position and size. In many ways this makes dealing with 3D easier, as there’s no complex math to deal with — just apply a CSS transform to rotate an element around an axis and you’re done!

“just”

Creating objects from rectangles seems limiting at first but you can do a surprising amount with them.

cssfps-objects

Really impressive. Also: look at the date of that post: January 2013.

Creating 3D worlds with HTML and CSS →
CSS FPS Demo →

Inverse trigonometric functions with Sass

You might think that math doesn’t have a lot to do with writing stylesheets, but you can actually do some amazing things with a little math in CSS. Math (particularly trigonometry) can help you model the real world. You’ll need it if you want to do something complicated with 3D transforms. And it can be a lot of fun if you just want to impress your friends.

The author, Ana Tudor, also talked about this at CSS Day 2014. Unfortunately I could not attend, due to being in Ireland at the moment.

Inverse trigonometric functions with Sass →