9 ms·

The World of CSS Transforms

294 points by joshwcomeau 5y ago

deleted 5y ago
[deleted]
vsareto 5y ago
Anyone know if scale(0) shares any properties with the other methods to hide things in CSS? https://stackoverflow.com/a/34529598 https://stackoverflow.com/a/34529598 I'm guessing it still takes space, is in flow, and takes clicks?
- maskros 5y ago
  It takes the same space in the flow as if not transformed, but it will take clicks and other mouse events using the transformed size and position. In your example table, transform:scale(0) will behave like visibility:hidden.
  - yawaworht1978 5y ago
    I have always stayed away from scale() whenever avoidable, especially using scale(0) to hide an element caused issues when the element is scaled up again. Depending on the positioning of the parent and sibling elements, it caused too many reflows and pushed other elements around, too much mental gymnastics for my liking. It can be useful, just my personal experience.
simonw 5y ago
This was great - I found the interactive demos really useful and I picked up some good new information from the extra context provided for each transform. I hadn't clocked how useful it is that percentage for translate() means the element itself, not it's parent container for example.
orangegreen 5y ago
What did people do before CSS transforms? I've been making an app with React Native and react-native-svg and even though react-native-svg supports transformations, I've had to do a lot of transforms with trigonometry (i.e. rotating a shape around a center point, then getting the new bounding box, which requires things such as Math.atan2). It's made me really appreciate 1. how much easier front end web development is and 2. how far we've gotten. I cannot tell you how much I appreciate web methods like getBoundingClientRect() or element.closest(), and how easy it is to make animations with CSS and move things around with transforms.
- armandososa 5y ago
  We mostly used boxy layouts, sliced up images and flash hacks.
  - armandososa 5y ago
    If you're genuinely curious, The CSS Zen Garden[1] is a great testimony of what people was able to accomplish with the the limitations of CSS2 while keeping support for IE6. That meant: A limited number of fonts, 1 channel transparency, no flexbox or grid for layouts, just floats and positioning. Fun times. [1]http://www.csszengarden.com/ http://www.csszengarden.com/
- legrande 5y ago
  > What did people do before CSS transforms? They used Flash. You can now do everything you could do in Flash, with CSS[0]. There's even a few GUI tools[1] for CSS where you don't have to figure out the code: [1] https://enjoycss.com/ https://enjoycss.com/ [1] http://selfcss.org/ http://selfcss.org/ [0] Edit: And Javascript
  - edoceo 5y ago
    Both of those block usage on mobile device. Is this irony?
    - legrande 5y ago
      Try spoofing the useragent, or if your browser supports requesting a 'desktop version', then use that. I wouldn't use a phone to code though
  - rchaud 5y ago
    > You can now do everything you could do in Flash, with CSS. AND JavaScript. With Flash, you just needed to know Flash. With HTML5, you need to know a whole lot more about DOM manipulation. If you're animating SVGs, that has its own markup and learning curve. Flash could also do 3D animation, which CSS cannot. You need to know WebGL and a library like three.js for that to be workable. By far the best WYSIWIG animation tool I've used is Tumult Hype for Mac. It handles the creation of all the JS-based animation triggers through the GUI. I hope there will be a WebGL version of this that is as easy to use.
pupppet 5y ago
So nice to see an actual personal blog not on Medium, nice design too.
evanreichard 5y ago
Interactive demo doesn't appear to work on Firefox?
- smbv 5y ago
  Works just fine for me.
- joshwcomeau 5y ago
  Appreciate the heads-up — Which version and OS? And is it all of the interactive demos, or only some of them?
  - evanreichard 5y ago
    Tried on two Macs: - Firefox 90.0.2 (64-bit) (Intel) and macOS 11.5 - Firefox 90.0.2 (64-bit) (Apple Silicon) and macOS 11.5.1 Tried private window with no extensions as well and still no dice. All interactive demos. Nothing happens when I manipulate the sliders. Interestingly this works fine when I click around the options [0] [0] https://developer.mozilla.org/en-US/docs/Web/CSS/transform https://developer.mozilla.org/en-US/docs/Web/CSS/transform
  - 2T1Qka0rEiPr 5y ago
    Same here. 91.9b9 and Win 10. I'm not sure any of them are.
  - xanth 5y ago
    Same here, V90.0.2 Windows 10
- deleted 5y ago
  [deleted]
mahoro 5y ago
Wow I love this tutorial! It helps to build better connections between enormous tools that CSS provides. As a newbie frontend dev I feel lost in them. Thanks, Josh!
dmitriid 5y ago
> Critically, the item's in-flow position doesn't change. This is the main problem with animations in CSS: they work as long as you don't have to reflow the document, and `transform: translate` is very good for that. But try to slide a new item into a list (or animate as it's being removed), and you're in for a nasty surprise especially if you don't know the height of the element beforehand.
- runawaybottle 5y ago
  Always pop stuff out with position absolute. It sucks to have to know top, bottom positioning, but it’s the only way to get smoother animations (pop it out of the document flow).
dustinlakin 5y ago
Excellent content Josh! Something about being able to adjust knobs makes me enjoy diving deep into a subject. I am excited for more of your course/posts.
Donckele 5y ago
blank page with “ An unexpected error has occurred.” on latest iphone/ios/safari?
- joshwcomeau 5y ago
  Eep, sorry to hear that! I haven't heard any other reports, and it's working on my fully-updated iPhone hoping this was just a hiccup.
  - Donckele 5y ago
    Hmmm, still getting the error. I do have strict settings for safari (cookie etc) maybe thats causing it. Still, unusual.
rchaud 5y ago
Bookmarked! I know CSS transforms relatively well, but there's just no substitute for a well-explained web page with interactive demos! Another similarly laid out web page I find myself going to is a Flexbox tutorial with demos, and toggles that show the difference between flex properties. [0] [0] https://www.codeinwp.com/blog/css-flexbox-tutorial/ https://www.codeinwp.com/blog/css-flexbox-tutorial/
aenis 5y ago
Coming from a person who started writing UIs back in the 1980's, where one needed good assembly code to be able to do display text files in text mode, I am seriously impressed how effective browsers are in rendering HTML/CSS. For a bunch of scripting languages stacked on top of each other, with byzantine levels of backwards compatibility and alternative ways to define the same things, thats seriously impressive optimisation techniques in the browsers. And they are pretty consistent, too. Absolutely awesome. Of course, I am sure it generates a lot of CO2 for all that effortless eyecandy.
- hoten 5y ago
  > I am sure it generates a lot of CO2 for all that effortless eyecandy. Why? Genuine question. A couple years ago I tried assessing the claim that websites (frontend, specifically) can meaningfully be tuned to reduce emissions [1]. Apparently it takes less than a dollar/year (2018) to charge a smartphone (0 to 100% daily) [2]. Given that fact, and assuming that energy usage from a mobile browser is in the same order of magnitude as a desktop browser + price is a decent stand-in for amount of emissions, it seems to me that any savings aimed at reducing emissions via "better" websites is negligible, even at web scale. I have a simple (maybe too simple?) spreadsheet to back this up [3]. [1] https://github.com/thegreenwebfoundation/lighthouse-plugin-greenhouse/issues/7#issuecomment-527540013 https://github.com/thegreenwebfoundation/lighthouse-plugin-g... [2] https://www.zdnet.com/article/heres-how-much-it-costs-to-charge-a-smartphone-for-a-year/ https://www.zdnet.com/article/heres-how-much-it-costs-to-cha... [3] https://docs.google.com/spreadsheets/d/18cNY8Xpabau3bMY5iEsBDiugBvGwWaeMo95zR56iCpc/edit https://docs.google.com/spreadsheets/d/18cNY8Xpabau3bMY5iEsB...
  - megous 5y ago
    "assuming that energy usage from a mobile browser is in the same order of magnitude as a desktop browser" Any basis for this assumption? Desktop processors are much less optimized for power consumption, and desktop browsers are also used differently with websites often time left running in the background tab, compared to the mobile phone.
    - 5y ago
_greim_ 5y ago
> This is incredibly handy when we want an element to sit just outside another one Nice! I've been using `position: absolute` + `bottom: 100%` for this. I'll be adding this trick to my toolbox.
reidjs 5y ago
Thanks for all of your classes and tutorials, Josh, they really help me understand how to use CSS to get stuff done.
divbzero 5y ago
Noteworthy tidbit about percent values: There's one thing that makes translate ridiculously powerful, though. Something totally unique in the CSS language. When we use a percentage value in translate, that percentage refers to the element's own size, not the available space within the parent container.
- brundolf 5y ago
  It's unique because in any other context, defining an element's size in terms of its size would be circular. But the transform property works differently: the rendered size is independent from the element's "real" DOM size. This can be seen in the fact that transform doesn't change the flow of the document at all; there's an invisible placeholder element that's still taking up the same space, and only its visual representation is changed. So the latter can be derived from the former without a circular effect. This is also the reason browsers can offload the transform property to the GPU. Something I love to do with this is create "squishy" buttons that transform:scale(0.9) when under the :active pseudo-class (with a short transition set up for smooth animation). It's extra satisfying on touchscreens.
  - jeffreyq 5y ago
    The first time I've stepped out of the shadows as a lurker just to +1 your comment on "squishy" buttons. I recently saw this technique used on matcha.xyz/blog and I must say I am also a big fan.
- tintt 5y ago
  Nice, didn’t know that one
jordache 5y ago
Do people still regard CSS transform as a solid strategy to invoke GPU powered UI updates?
tintt 5y ago
It’s cool, but 2D transformations are easy to wrap your head around anyway. Waiting for part two!
bobbylarrybobby 5y ago
Great article, but one nit: order of transforms matters, yes, but you’re supposed to read them right to left (like matrix multiplication). When you have `transform: translateX(…) rotate(…);`, you’re saying “first rotate it about the origin, then translate it”. When you have `transform: rotate(…) translateX(…);`, you’re saying “first translate it, then rotate it about the origin”! — not the translated object’s origin! That’s why in the the second example the transformed object swings around the origin from a distance when you change the rotation angle. I mean, sure, you can mentally do it left to right and track how the axes change, as the author did, but right to left is a lot simpler, and is what’s actually happening to the vectors behind the scenes.
- joshwcomeau 5y ago
  Oh! This is a helpful insight, thanks. Updating the blog post.
- userbinator 5y ago
  You can think of the transforms as function applications to more easily remember the order: translate rotate foo -> translate(rotate(foo)), i.e. do the rotation and then translate the result of it.
oblak 5y ago
You can do 3d with CSS but to my knowledge there's no way to apply lighting and that, to me, is the real deal breaker. Otherwise people would've done all kinds of unnecessary but cool demos just for the sake of it.
- ilaksh 5y ago
  https://keithclark.co.uk/labs/css-fps/desktop/ https://keithclark.co.uk/labs/css-fps/desktop/
dheera 5y ago
> used the transform property more than 350 times! Of course. -webkit-transform, -o-transform, -ms-transform, -moz-transform, -e-transform, -some-other-bullshit-browser-transform, -khtml-transform, -html-transform ... welcome back to the 90's world of brower-specific-internet
macando 5y ago
This shows how powerful modern CSS is. I too was surprised to discover that the order of transform params matters. Until I swapped them I was getting a completely different and unwanted animation effect. Golden rule of web dev: If you can do it in CSS, do it in CSS.
jamal-kumar 5y ago
I love this guy's blog. I've been learning so much about modern CSS from it. I highly suggest anyone who wants to get up to speed on this to check out his mailing list.

294 points by joshwcomeau 5y ago

deleted 5y ago

[deleted]

Anyone know if scale(0) shares any properties with the other methods to hide things in CSS? https://stackoverflow.com/a/34529598 https://stackoverflow.com/a/34529598 I'm guessing it still takes space, is in flow, and takes clicks?

maskros 5y ago
It takes the same space in the flow as if not transformed, but it will take clicks and other mouse events using the transformed size and position. In your example table, transform:scale(0) will behave like visibility:hidden.
- yawaworht1978 5y ago
  I have always stayed away from scale() whenever avoidable, especially using scale(0) to hide an element caused issues when the element is scaled up again. Depending on the positioning of the parent and sibling elements, it caused too many reflows and pushed other elements around, too much mental gymnastics for my liking. It can be useful, just my personal experience.

simonw 5y ago

This was great - I found the interactive demos really useful and I picked up some good new information from the extra context provided for each transform. I hadn't clocked how useful it is that percentage for translate() means the element itself, not it's parent container for example.

orangegreen 5y ago

What did people do before CSS transforms? I've been making an app with React Native and react-native-svg and even though react-native-svg supports transformations, I've had to do a lot of transforms with trigonometry (i.e. rotating a shape around a center point, then getting the new bounding box, which requires things such as Math.atan2). It's made me really appreciate 1. how much easier front end web development is and 2. how far we've gotten. I cannot tell you how much I appreciate web methods like getBoundingClientRect() or element.closest(), and how easy it is to make animations with CSS and move things around with transforms.

armandososa 5y ago
We mostly used boxy layouts, sliced up images and flash hacks.
- armandososa 5y ago
  If you're genuinely curious, The CSS Zen Garden[1] is a great testimony of what people was able to accomplish with the the limitations of CSS2 while keeping support for IE6. That meant: A limited number of fonts, 1 channel transparency, no flexbox or grid for layouts, just floats and positioning. Fun times. [1]http://www.csszengarden.com/ http://www.csszengarden.com/
legrande 5y ago
> What did people do before CSS transforms? They used Flash. You can now do everything you could do in Flash, with CSS[0]. There's even a few GUI tools[1] for CSS where you don't have to figure out the code: [1] https://enjoycss.com/ https://enjoycss.com/ [1] http://selfcss.org/ http://selfcss.org/ [0] Edit: And Javascript
- edoceo 5y ago
  Both of those block usage on mobile device. Is this irony?
  - legrande 5y ago
    Try spoofing the useragent, or if your browser supports requesting a 'desktop version', then use that. I wouldn't use a phone to code though
- rchaud 5y ago
  > You can now do everything you could do in Flash, with CSS. AND JavaScript. With Flash, you just needed to know Flash. With HTML5, you need to know a whole lot more about DOM manipulation. If you're animating SVGs, that has its own markup and learning curve. Flash could also do 3D animation, which CSS cannot. You need to know WebGL and a library like three.js for that to be workable. By far the best WYSIWIG animation tool I've used is Tumult Hype for Mac. It handles the creation of all the JS-based animation triggers through the GUI. I hope there will be a WebGL version of this that is as easy to use.

pupppet 5y ago

So nice to see an actual personal blog not on Medium, nice design too.

evanreichard 5y ago

Interactive demo doesn't appear to work on Firefox?

smbv 5y ago
Works just fine for me.
joshwcomeau 5y ago
Appreciate the heads-up — Which version and OS? And is it all of the interactive demos, or only some of them?
- evanreichard 5y ago
  Tried on two Macs: - Firefox 90.0.2 (64-bit) (Intel) and macOS 11.5 - Firefox 90.0.2 (64-bit) (Apple Silicon) and macOS 11.5.1 Tried private window with no extensions as well and still no dice. All interactive demos. Nothing happens when I manipulate the sliders. Interestingly this works fine when I click around the options [0] [0] https://developer.mozilla.org/en-US/docs/Web/CSS/transform https://developer.mozilla.org/en-US/docs/Web/CSS/transform
- 2T1Qka0rEiPr 5y ago
  Same here. 91.9b9 and Win 10. I'm not sure any of them are.
- xanth 5y ago
  Same here, V90.0.2 Windows 10
deleted 5y ago
[deleted]

mahoro 5y ago

Wow I love this tutorial! It helps to build better connections between enormous tools that CSS provides. As a newbie frontend dev I feel lost in them. Thanks, Josh!

dmitriid 5y ago

> Critically, the item's in-flow position doesn't change. This is the main problem with animations in CSS: they work as long as you don't have to reflow the document, and `transform: translate` is very good for that. But try to slide a new item into a list (or animate as it's being removed), and you're in for a nasty surprise especially if you don't know the height of the element beforehand.

runawaybottle 5y ago
Always pop stuff out with position absolute. It sucks to have to know top, bottom positioning, but it’s the only way to get smoother animations (pop it out of the document flow).

dustinlakin 5y ago

Excellent content Josh! Something about being able to adjust knobs makes me enjoy diving deep into a subject. I am excited for more of your course/posts.

Donckele 5y ago

blank page with “ An unexpected error has occurred.” on latest iphone/ios/safari?

joshwcomeau 5y ago
Eep, sorry to hear that! I haven't heard any other reports, and it's working on my fully-updated iPhone hoping this was just a hiccup.
- Donckele 5y ago
  Hmmm, still getting the error. I do have strict settings for safari (cookie etc) maybe thats causing it. Still, unusual.

rchaud 5y ago

Bookmarked! I know CSS transforms relatively well, but there's just no substitute for a well-explained web page with interactive demos! Another similarly laid out web page I find myself going to is a Flexbox tutorial with demos, and toggles that show the difference between flex properties. [0] [0] https://www.codeinwp.com/blog/css-flexbox-tutorial/ https://www.codeinwp.com/blog/css-flexbox-tutorial/

aenis 5y ago

Coming from a person who started writing UIs back in the 1980's, where one needed good assembly code to be able to do display text files in text mode, I am seriously impressed how effective browsers are in rendering HTML/CSS. For a bunch of scripting languages stacked on top of each other, with byzantine levels of backwards compatibility and alternative ways to define the same things, thats seriously impressive optimisation techniques in the browsers. And they are pretty consistent, too. Absolutely awesome. Of course, I am sure it generates a lot of CO2 for all that effortless eyecandy.

hoten 5y ago
> I am sure it generates a lot of CO2 for all that effortless eyecandy. Why? Genuine question. A couple years ago I tried assessing the claim that websites (frontend, specifically) can meaningfully be tuned to reduce emissions [1]. Apparently it takes less than a dollar/year (2018) to charge a smartphone (0 to 100% daily) [2]. Given that fact, and assuming that energy usage from a mobile browser is in the same order of magnitude as a desktop browser + price is a decent stand-in for amount of emissions, it seems to me that any savings aimed at reducing emissions via "better" websites is negligible, even at web scale. I have a simple (maybe too simple?) spreadsheet to back this up [3]. [1] https://github.com/thegreenwebfoundation/lighthouse-plugin-greenhouse/issues/7#issuecomment-527540013 https://github.com/thegreenwebfoundation/lighthouse-plugin-g... [2] https://www.zdnet.com/article/heres-how-much-it-costs-to-charge-a-smartphone-for-a-year/ https://www.zdnet.com/article/heres-how-much-it-costs-to-cha... [3] https://docs.google.com/spreadsheets/d/18cNY8Xpabau3bMY5iEsBDiugBvGwWaeMo95zR56iCpc/edit https://docs.google.com/spreadsheets/d/18cNY8Xpabau3bMY5iEsB...
- megous 5y ago
  "assuming that energy usage from a mobile browser is in the same order of magnitude as a desktop browser" Any basis for this assumption? Desktop processors are much less optimized for power consumption, and desktop browsers are also used differently with websites often time left running in the background tab, compared to the mobile phone.
  - 5y ago

_greim_ 5y ago

> This is incredibly handy when we want an element to sit just outside another one Nice! I've been using `position: absolute` + `bottom: 100%` for this. I'll be adding this trick to my toolbox.

reidjs 5y ago

Thanks for all of your classes and tutorials, Josh, they really help me understand how to use CSS to get stuff done.

divbzero 5y ago

Noteworthy tidbit about percent values: There's one thing that makes translate ridiculously powerful, though. Something totally unique in the CSS language. When we use a percentage value in translate, that percentage refers to the element's own size, not the available space within the parent container.

brundolf 5y ago
It's unique because in any other context, defining an element's size in terms of its size would be circular. But the transform property works differently: the rendered size is independent from the element's "real" DOM size. This can be seen in the fact that transform doesn't change the flow of the document at all; there's an invisible placeholder element that's still taking up the same space, and only its visual representation is changed. So the latter can be derived from the former without a circular effect. This is also the reason browsers can offload the transform property to the GPU. Something I love to do with this is create "squishy" buttons that transform:scale(0.9) when under the :active pseudo-class (with a short transition set up for smooth animation). It's extra satisfying on touchscreens.
- jeffreyq 5y ago
  The first time I've stepped out of the shadows as a lurker just to +1 your comment on "squishy" buttons. I recently saw this technique used on matcha.xyz/blog and I must say I am also a big fan.
tintt 5y ago
Nice, didn’t know that one

jordache 5y ago

Do people still regard CSS transform as a solid strategy to invoke GPU powered UI updates?

tintt 5y ago

It’s cool, but 2D transformations are easy to wrap your head around anyway. Waiting for part two!

bobbylarrybobby 5y ago

Great article, but one nit: order of transforms matters, yes, but you’re supposed to read them right to left (like matrix multiplication). When you have `transform: translateX(…) rotate(…);`, you’re saying “first rotate it about the origin, then translate it”. When you have `transform: rotate(…) translateX(…);`, you’re saying “first translate it, then rotate it about the origin”! — not the translated object’s origin! That’s why in the the second example the transformed object swings around the origin from a distance when you change the rotation angle. I mean, sure, you can mentally do it left to right and track how the axes change, as the author did, but right to left is a lot simpler, and is what’s actually happening to the vectors behind the scenes.

joshwcomeau 5y ago
Oh! This is a helpful insight, thanks. Updating the blog post.
userbinator 5y ago
You can think of the transforms as function applications to more easily remember the order: translate rotate foo -> translate(rotate(foo)), i.e. do the rotation and then translate the result of it.

oblak 5y ago

You can do 3d with CSS but to my knowledge there's no way to apply lighting and that, to me, is the real deal breaker. Otherwise people would've done all kinds of unnecessary but cool demos just for the sake of it.

ilaksh 5y ago
https://keithclark.co.uk/labs/css-fps/desktop/ https://keithclark.co.uk/labs/css-fps/desktop/

dheera 5y ago

> used the transform property more than 350 times! Of course. -webkit-transform, -o-transform, -ms-transform, -moz-transform, -e-transform, -some-other-bullshit-browser-transform, -khtml-transform, -html-transform ... welcome back to the 90's world of brower-specific-internet

macando 5y ago

This shows how powerful modern CSS is. I too was surprised to discover that the order of transform params matters. Until I swapped them I was getting a completely different and unwanted animation effect. Golden rule of web dev: If you can do it in CSS, do it in CSS.

jamal-kumar 5y ago

I love this guy's blog. I've been learning so much about modern CSS from it. I highly suggest anyone who wants to get up to speed on this to check out his mailing list.