Thank you so much for what you do. Ive been a front end dev for almost 17 years and Im guilty of relying in my legacy knowledge of css a lot of times. These little updates that you do continously blow my mind and make my work not just easier but a lot more fun.
Hey Kevin, Kudos from Germany. My colleague, a Java Backend Dev ask me about some css techniques and I've recommended your channel. He now is binge watching you 😂 He loves your channel, videos and your kindness same as i do. We'll donate :)
Genuinely huge, so glad this is something that's happening! So sick of having to repeat stacked transforms everywhere just because one bit is changing.
What's amazing about these properties is that the *order* of the stack context doesn't matter If you do an independent scale and then an indepent translate, no matter the order the result will be the same Unlike the transform ones, if you do a scale then a translate the result will be different
This is so cool! I had noticed before but I just wasn't sure if it would be safe to use, because browser compatibility and that. Thanks Kevin! Very helpful as always.
That's awesome, I hope I'll be allowed to switch my current project to the new way of transforming. I am currently doing a lot of 3D Modelling with CSS+HTML only for a project so this might be a lot better to read and work with :D
Wait so how does the order work? Document order - applied in the order they appear in the source code? Constant order - applied in the same order given by the spec regardless of document order?
Thanks for the valuable information. What happens if you work on old code in your company's products? Will the new rule create imbalances in the application?
In this case, luckily no. It just depends on the cascade like anything else, so if you had a transform in one place, and one of these later on, it'll only over-write the one that you changed.
What if we want to use the rotate property to rotate 20deg on X axis and 10deg on Y Axis? i tried rotate:x 20deg, y 10deg; it does not work. I also tried the same but without comma, it also does not work...
The problem with adopting new CSS changes is browser compatibility. Wouldn't you need to update to a new browser version that supports these new CSS properties? Not everyone updates their browser every time a new version comes out or every time CSS gets a change and update, so I'm a bit hesitant on adopting this at the moment.
I watched webdev simplified's video about this so i knew about this. But in my opinion, transforms are still needed. The reason for this is because if we use transforms we can use transform-origin. As far as i know, We cannot change the origin if we don't use transforms...
Sadly there is no translate-x or translate-y. Sometimes it would be handy to just control one value and not having to do an extra round over custom properties.
@@KevinPowell I have actually been thinking of a postcss plugin for it. It probably already exists somewhere. In Tailwind which I still like we can write py-4 (class). It means padding 1rem on the y axis. There are px-4, mx-4, my-4 etc. Short and sweet.
@@KevinPowell It's inconsistent with the CSS syntax in general. E.g. translate should be a shorthand for translate-x, translate-y, and translate-z like literally any other CSS property that affects axis.
I see some of your videos dubbed in spanish in your own channel. Will you continue dubbing your videos? They have very good content but you talk so fast and It's difficult to me understanding what you say 😅😅
I plan to start again, I just haven't had my videos ready ahead of time lately, and I need them ready at least a week before they go live to be able to do it.
Why doesn’t CSS offer general homogeneous matrices? You can do everything with them. But people seem to be scared of matrices because, you know, maths.
This is the best Front-end dev channel I have found.
Thanks so much, really glad that you enjoy my content!
True, whenever something in css changes, he uploads, i see it, i'm up to date.
also many courses don't tell the best practices or does not explain many things correctly. His channel has everything explained in a simpler way.
@@luckylukeskywalker exactly. I've passed interviews thanks to @Kevin Powell
Me too bro....
CSS need for good updates like these, thanks for covering
Thank you so much for what you do. Ive been a front end dev for almost 17 years and Im guilty of relying in my legacy knowledge of css a lot of times. These little updates that you do continously blow my mind and make my work not just easier but a lot more fun.
2:06 The 3d rotate property is mind blowing! Thanks 4 sharing Kevin!
Hey Kevin, Kudos from Germany. My colleague, a Java Backend Dev ask me about some css techniques and I've recommended your channel. He now is binge watching you 😂 He loves your channel, videos and your kindness same as i do. We'll donate :)
I was wondering if there was a better way only yesterday. Great news. Thanks for the content - its appreciated
Genuinely huge, so glad this is something that's happening! So sick of having to repeat stacked transforms everywhere just because one bit is changing.
You can just use custom properties for your transforms. No need to repeat anything.
Hi Kevin, be careful. The hover effect works differently when using transform and using the non-transform method.
How so?
I just noticed a different hitbox too, wierd...
OMG this is my ahaa moment right now..I was trying rotate just yesterday and THANK YOU!!!!!!!! Your videos are best in css world
What's amazing about these properties is that the *order* of the stack context doesn't matter
If you do an independent scale and then an indepent translate, no matter the order the result will be the same
Unlike the transform ones, if you do a scale then a translate the result will be different
u're the man! thx for those updates and great css videos
Immaculate timing. You just solved the exact problem I was having with a logo animation.
Really the best CSS channel out there.
Thanks Kevin!
Thank you Kevin! Great video!
This is so cool! I had noticed before but I just wasn't sure if it would be safe to use, because browser compatibility and that. Thanks Kevin! Very helpful as always.
Browser support is surprisingly good! Old phones are the biggest issue, but it goes back as far as Safari 14.5, so it's not terrible in that regard.
I was actually "wow"ing while watching this video. Absolutely amazing content like always Mr Kevin!!!
This is exciting to know, thanks Kevin!!
So far the only tutorial I've seen that takes it slow and doesn't require prior experience to soft design.
Rock on, K Powell. Tks!!!!
Awesome! very informative Kev🔥
That's awesome, I hope I'll be allowed to switch my current project to the new way of transforming. I am currently doing a lot of 3D Modelling with CSS+HTML only for a project so this might be a lot better to read and work with :D
ITS WORKING! nice job dude
Do you still have to use the shared "transform-origin" or can you say have a "scale-origin", "rotate-origin", etc.?
Fantastic!!! This TRANSFORMED in better the way to write CSS! 😉
Thank you! This is great!
Thanks for this. Really good to know
what a time to be alive!
Wait so how does the order work? Document order - applied in the order they appear in the source code? Constant order - applied in the same order given by the spec regardless of document order?
Yup, it's regardless oof document order if you use these.
Thank you sir.
a really useful update that could be used daily.
Hey Kevin, just wanna ask , how can I get this type of update related news ?
Words can't explain
Thank you ❤️
Cool!
Thanks for the valuable information. What happens if you work on old code in your company's products? Will the new rule create imbalances in the application?
In this case, luckily no. It just depends on the cascade like anything else, so if you had a transform in one place, and one of these later on, it'll only over-write the one that you changed.
@@KevinPowell great to know. Thanks
Great information!
This is super awwwwwesome
Watched on Kyle channel but watched anyway... Cause learned so much from this channel.
The order of translate and rotate got me... I'm pretty sure it got me up until this moment of watching this video. lol
What if we want to use the rotate property to rotate 20deg on X axis and 10deg on Y Axis? i tried rotate:x 20deg, y 10deg; it does not work. I also tried the same but without comma, it also does not work...
CSS MASTER !
So great!
Do you still need transform-origin, or do the individual properties have their own origin property?
Nice!
Does transform-origin still work the same for these properties? I almost never use scale and rotate without setting the origin.
The problem with adopting new CSS changes is browser compatibility. Wouldn't you need to update to a new browser version that supports these new CSS properties? Not everyone updates their browser every time a new version comes out or every time CSS gets a change and update, so I'm a bit hesitant on adopting this at the moment.
Kevin, do you have a video about using CSS styles for accessibility features? I currently use a Javascript plugin and accessiBe.
I watched webdev simplified's video about this so i knew about this. But in my opinion, transforms are still needed. The reason for this is because if we use transforms we can use transform-origin. As far as i know, We cannot change the origin if we don't use transforms...
Transform-origin still works if you use these :D
@@KevinPowell And, it seems, transform-origin is still shared among the new separate properties, is that it?
Or are there separate *-origin, too?
@@KevinPowell Oh i had no idea about this. Well, then it is awesome :)
🔥🔥
how do you apply multiple translations or rotations, where the order is crucial?
Sadly there is no translate-x or translate-y. Sometimes it would be handy to just control one value and not having to do an extra round over custom properties.
And what is the order of these transformations? What if you want to change the default order?
Wasn’t this on safari for a long time now?
thanks :D
Great! Off topic but I wish there was something like padding-y: 2rem;
padding-block: 2rem /* y-axis */
padding-inline: 2rem /* x-axis */
Same with margins :)
yeah, I love logical properties, but having to write -inline or -block is so long 😅. Sounds like a potential postCSS plugin :D
@@KevinPowell I have actually been thinking of a postcss plugin for it. It probably already exists somewhere.
In Tailwind which I still like we can write py-4 (class). It means padding 1rem on the y axis. There are px-4, mx-4, my-4 etc. Short and sweet.
Good to know! Tthanks. Do we have the same with 'filter' and 'mix-blend-mode' props?
Nope, just these three :)
@@KevinPowell thanks
Studying how to use soft soft is far more important than studying for my exams lmao
Like before i watch
I wonder if you can go full 3D programmer and do a matrix transform?
So... we don't need transform anymore?
Zed? Are you Canadian? 🤔
I sure am :D
3d tutorial plz Kevin
Unfortunately the API is really insonsistent, which annoys me and I hope they will change Transforms-2 API.
What's inconsistent about it? If you mean the order affecting how things are applied, that is consistent if you use these. Or is there something else?
@@KevinPowell It's inconsistent with the CSS syntax in general. E.g. translate should be a shorthand for translate-x, translate-y, and translate-z like literally any other CSS property that affects axis.
@@playersAvatar ah, I see what you mean. I'd be very surprised if it ever gets updated from this, but who knows!
My caution is this is only at 79.58% support on Can I Use. So some Samsung mobiles gonna get busted.
Kyle have already made this on his channel, anyway great content.
I'm sure we have a lot of overlapping content at this point :)
wasnt that a thing for a long time?
Gained support in Safari back in April 2021, and Firefox a year before that! But it only gained support in Chrome August 1st of this year.
@@KevinPowell ohh i see, was using firefox a lot
how to use dom please make video
Do you mean DOM manipulation? I don't have many plans for JS content at the moment.
Like
I see some of your videos dubbed in spanish in your own channel. Will you continue dubbing your videos? They have very good content but you talk so fast and It's difficult to me understanding what you say 😅😅
I plan to start again, I just haven't had my videos ready ahead of time lately, and I need them ready at least a week before they go live to be able to do it.
Why doesn’t CSS offer general homogeneous matrices? You can do everything with them. But people seem to be scared of matrices because, you know, maths.
Thanks for your videos
May I suggest keeping the visuals but maintaining the comprehensive lectures.
This is much easier
Yeah, it's pretty great :)
WDS was quicker...
Kyle was first
Best was he best? 😅
@@KevinPowell no, you are, because he never responds to me.
Don’t u think working on UI these days is like reading News everyday?
Everything is fast here...ur speaking fast which is difficult to understand what ur trying to tel and also fast animations not getting into my mind
Cool!