CSS Transform Is Dead! Use This Instead

[@IZR194]

Getting to use that in projects 3-5 years from now will be amazing.

[@wallacesantos0]

CSS used to be like this when we used to care about IE. Nowadays the majority of browsers are Chromium, and the ones that aren't also implements the features pretty quickly. So it won't be that long until 95%+ coverage

[@IZR194]

@@wallacesantos0 all good, unless you plan to support iPhones. IE didn't go anywhere, nowadays we just call it Safari.

[@trappedcat3615]

@@wallacesantos0 It's not just IE. There are many user who simply don't or can't update their browsers. Chrome OS devices stop updating Chrome at certain point and those users are stuck on an older version. Each model has an end of life cycle where updates just cease. Android models also have a limit on what versions of Chrome and Firefox are supported.

[@ashwinbhargava3011]

Time to write a webpack loader then.

[@mansch55]

@@IZR194 iOS supports this since version 14.1

[@jfftck]

The biggest difference between these properties and the transform property is that the transform each function is applied in order where it is easier to work with 3D transformations as you can rotate after translate or the other way around. But this will be useful for most use cases.

[@IdleAtre]

i still use transform because you can actually use both transform: translate and the standalone translate, and they overlap without overriding, which allows you to define an x translate and later work on the y without having the need to reference the x once again, this makes things way more convenient. if you do transform: translateY(-50%); and in another class selector translate: -100% 0; both horizontal and vertical translates will be effective, if you only use one of those, then you will have to know the x and y translate every time. This basically works as an offset translate.

[@chinhtrung6130]

I agree with your opinion, we should use the old transform for translate property and use standalone properties for the other to avoid any conflict if we were using any CSS Framework.

[@ethisfreedom]

@@chinhtrung6130 agree

[@boiimcfacto2364]

Kyle my man, your content is already super interesting. The title of this video is unnecessary clickbait in my opinion. New web devs: this is a VERY new feature in CSS so it won't support a vast majority of browsers. It's great for small personal projects, but don't go using these for around 3-4 more years in enterprise production code. Love your content as always - though maybe lay off the clickbait a little?

[@NoeruCranel]

From caniuse, the properties are at about 80% coverage for the userbase. If you look at the title from a biased personal opinion, it makes sense - I too would rather use these new props instead of transform, even more in combination with animations. So from a objective point of view, the title is clickbait, transform is not going to be replaced entirely. From a subjective pov it's understandable and fine imo.

[@boiimcfacto2364]

@@NoeruCranel Of course it's understandable from a subjective POV: that's what the 'subjective' part of it is there for. But even caniuse won't give you proper estimates. If you're not in the US or want your site to be accessible to the general public - then you've gotta account for the vast number of budget phones that aren't updated regularly. I'm from India, which means I have to assume 99% of my users will have the equivalent of an iPhone 6 XD

[@ShawnRitch]

I agree, be straight up with the titling and descriptions of videos. I hate clickbait cr*p.

[@NECOdes]

having clickbait doesn't change the content of the video tho, it's just there to attract more attention and play with KZbin algorithm

[@rea1m_]

@@NoeruCranel 80% is still insufficient amount tho

[@ziweiwang3311]

hey guys, before you use this new feature, make sure to check its compatibility with the browsers on caniuse or MDN.

[@jensgur]

Yeah there are do many great properties we can't use because companies still using old browser versions:(

[@andrewilliams4500]

Hey, I was just wondering about this, do you know what Browsers are compatible with this? I'd really appreciate it, because can't find anything that says what Browsers are compatible?

[@alperemir5529]

This is a great feature for who always writing " translate: transform(); " every time ! :D

[@technoph1le]

ohh yeah. that happens to me as well

[@Anonymous-il1fn]

You got it backwards

[@mineturtle1841]

shoot, this one hits close to home...

[@mr.doubled4766]

I got say man this really makes web development simplified 😇

[@colettemr]

Mind blown. I use the transform property a lot, especially on .svg. I've decided to put in a warning to only use updated browsers. People actually still use IE.. not Edge but IE. WHY???

[@brhh]

I will never believe the people that would find my projects would be using ie, this browser is digita hazard. just the idea of using ie gives me headaches

[@RootsterAnon]

not anymore my friend.. :D

[@yestermonth]

Still popular in Japan

[@theodorealenas3171]

@@yestermonth wait what?

[@yestermonth]

@@theodorealenas3171 Yeah, a lot of Japanese institution still heavily rely on IE, part of the reason why Microsoft haven't fully phased it out.

[@Chalisque]

The transform is more powerful. The individual translate, rotate, scale simply optimise a common case. With transform you have full control over the transform matrix. If _all_ you want to do can be accomplished by scale, or rotate, or translate, then fine. But note that with translate you can specify the order in which the transforms are applied. And you can apply transforms multiple times. For example: dialog.b { transform: translate(-100px) rotate(45deg) translate(100px) rotate(-45deg); } dialog.c { transform: rotate(45deg) translate(-100px) rotate(-45deg) translate(100px); } These end up with the dialog not begin rotated, merely translated. Where it ends up is different for each, since rotation and translation do not commute. And if you translate before scaling vs afterwards (can't remember which way round it is as I write this), then the translation is scaled too. One way around, a 100px translate and a 2x scale will result in the element being twice as large but translated 100px; the other way around it will be 2x scaled but translated 200px. This all goes back to the venerable days of the Postscript imaging model, which is the granddaddy of modern 2D drawing APIs.

[@Mati2007PL]

5:40 actually you can animate custom properties but only after u define their type. example: @property --rotate { syntax: ''; inherits: false; initial-value: 0deg; }

[@BostYT]

Kyle doesn't really know what he's talking about, throwing around false claims

[@eduazy]

Firefox doesn't support custom properties

[@ggorg0]

That is the solution to a really big problem i had with my website. I needed to center a box on the screen (using translate -50% YES I KNOW FLEXBOX IS BETTER BUT I COULDNT USE IT BECAUSE OF OTHER STUFF) and also make it bigger on hover. I wrapped all that in a transition and... it transitioned the translate too. Thats a really big thing for me! Thanks soo much wds!

[@Rust_Rust_Rust]

Just use flexbox

[@ggorg0]

@@Rust_Rust_Rust just read

[@Rust_Rust_Rust]

@@ggorg0 just use margin: auto

[@travisv]

Do you still need to use transform-origin or how do you change that value for the new individual properties?

[@thekitspecial]

do new properties mess up z-index stacking like transform does?

[@iam-mehrab]

He is sitting there to save your time, make you smile while staring at your code running in awesome way.

[@thecodingchef9292]

Why do i have a feeling you actually suggested these changes to the css team, this really simpifies our lives, webdev indeed simpified

[@advaittrivedi5905]

Actually your videos are so much fun to watch it's like getting entertainment and information at the same time... Great job Kyle... 🙌🏻🙌🏻🤩

[@itsmaxim01]

softs it was really confusing but thanks to you I've gotten more professional at it!! ✌

[@gauravvishwakarma8111]

Congratulations for 1million subscribers... 👍👍👍👍 Love from India 💓💓

[@LePhenixGD]

Thank you very much! Though I do have a question regarding the *order* of these properties For instance if you apply this to a : transform: translate(-50%, -50%) scale(105%); It wouldn't give the same result as: transform: scale(105%) translate(-50%, -50%) So does the same rule apply with these newly added CSS properties?

[@CottidaeSEA]

My best suggestion is to simply try it. Also kind of strange that those two have different results.

[@MartynDunnMusic]

@@CottidaeSEA They're different, because the translate is dependent on the size of the object. It moves by 50% of its size, so if the size increases the distance will, too. But not if the size is increased after the movement.

[@CottidaeSEA]

@@MartynDunnMusic Yeah, but since it's the same transform, I'd expect it to have a priority system rather than just going left to right.

[@advaittrivedi5905]

Also want a seperate video of you playing that awesome guitar at the back 😂🤣 it's been with us in our entire journey

[@Mazoane]

This is amazing. I was struggling to create a slime that has some animations on my portfolio and, since new transform properties overwrite preexistentes ones, I had to limit my slime’s animation. With the these new features, I can go back and implement what I wanted. I didn’t know you could fix that issue with css variables

[@rfryanfavour4369]

You said I'm not gonna use the rotate 3d stuff but that was actually exactly what I needed to for my current css project .... thank you sir

[@SirChogyal]

Rotation is cool. I like it. Now I am using it.

[@myquyenthai4802]

Thanks!

[@WebDevSimplified]

Thank you for the support!

[@thelastninja4825]

finally ! no need to keep the state with multiple transform elements, thank

[@KalenMaahs]

That cleaned my animations a lot, thanks. Still have the chrome, machine specific, artifacting happening but I'm going to call 1 out of 5 test machine not something to worry about.

[@gametroll6311]

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.

[@ascourter]

Great video. To the point and really good examples. Was able to watch this and now can use scale, rotate, translate. Thanks!

[@nustaniel]

6:44 And matrix3d, I need my matrix3d to create proper looking flippy floppies.

[@mujibulhaquetanim]

please make videos on new css/Javascript features regularly

[@perrosaurio725]

You make css so easy. Dude, awesome explanations. Do you have a video about rems vs pixels or something like that? I had some troubles with that in an interview so Im studying it again now.

[@QwDragon]

First of all you can animate css variables (have to use CSS.registerProperty or @property). And the secons thing: in transform the order of translate and scale matters. How is it solved with new properties? And how do they interact with transform itself if I use all 4 of them?

[@salmanhossain1637]

Thanks for the information

[@sanatkumar7848]

Hi Kyle. Can you please mention the sites where you read about front-end development things

[@ChrisMochinskiMusic]

I’m seeing minimal documentation and no support (yet) other than Firefox. 1. Anyone know when exactly these properties dropped? 2. Anyone able to track down solid docs?

[@atg878]

how i can make transform: rotatex(20deg) rotate(30deg) by the new css feature

[@GnomePuntTrainerYT]

The scale property has 79.58% overall browser support. It's cleaner code, but not hardly makes a difference compared to just using transform instead that has 98.68% overall browser support.

[@webdev___bappa4289]

Great. Informative video.

[@Sacramentix]

We could solve the example 2 before but It's a pain. You basically need a wrapper for each animated transform property you and it become tricky with 3d perspective

[@danielrondongarcia9905]

Great!! Thanks for sharing your knowledge!

[@salmanhossain1637]

Finally, it came 🤗🤗🤗

[@connect_to_the_dots]

Oh, I goodly want to hear so!

[@joerivde]

Really love this, but mainly for transitioning, animating properties separately. Last example is perfectly possible by using the old transform as well though. Biggest concern I have: how do you specify the order of transformations?

[@khaledbudajaja6137]

Thanks for sharing Does the new Scale and translate work inside bootstrap card class? The old ones have issue when element is placed inside bootstrap card class Thanks again

[@CodeWithSahand]

useful and well explained, thanks

[@keifer7813]

Me, last week: Wow, this transform property came in handy. I'll probably use it a lot from now on 0:01

[@eriscrypt]

Hi ! Can you pls answer for some important questions for me ? 1) What the monitor u use ? (inches) 2) What the scaling for display u use? P.S. Sorry for my English ( I am from Ukraine

[@multiwebinc]

Hey Kyle. I've noticed in several of your videos that you blink excessively. I used to have the same problem and it turns out it was very dry eyes, but unfortunately I let it go for too long and ended up giving myself astigmatism. I was able to fix my dry eyes by taking Omega 3 supplements and moisturizing eye drops when they get really bad. Maybe you should try that out before you end up with astigmatism.

[@ChrisMochinskiMusic]

I have this issue - it’s a minor OCD thing (I also obsessively clear my throat).

[@sabuein]

As always, thank you, Kyle.

[@MinhTran-ve6gl]

Have any conflict between transform: translate and translate?

[@clarkdnro]

very nice dude but how much memory eats a rotating box ?

[@Yous0147]

This is amazing, exactly the thing I was fighting against not too long ago. Is there a way to "polyfill" this into older browsers? I read someone talking about a web pack.

[@andrewilliams4500]

Is it supported by all Browsers ? Can't seem to find any info on that? Especially wondering about Chrome, Firefox and Safari?

[@CarlitoProductions]

The only thing is that it seems not to be supported by most web browsers just yet, so it wouldn't be possible to use it for involved projects. But once it comes into full effect it will be awesome

[@aybak3k]

FINALLY! IT'S ABOUT FREAKING TIME

[@IINoirII]

"rotate: x/y/z + angle" rule is not supported in Safari, but it's fine, I guess

[@wilkk7867]

but what about transformOrigin...?

[@ventsislavstoimenov4404]

Great video as usual 👌 Thank you, Kyle! Will it work also for styled components?

[@meganweber5057]

This is so great. I hope we get parent-relative units soon.

[@Take-the-Ticket]

Soon! :has is coming. Ex. div:has(p) will select any div with a paragraph in it. Firefox and abunch of mobile browsers are the hold-outs right now.

[@dave6012]

What about transform origin? Is there an equivalent for these properties?

[@bobdinitto]

Nice! Thanks for sharing!

[@midnightinsane6893]

This is very convenient, but it will not work when combined. like in the cursor cursor and other components. But it can be solved with calc.

[@dmitryutkin9864]

What about transform-origin? Is it applicable to new props?

[@aravindprabha4656]

Super 👌 bro clear cut explanation

[@cinematwenty-2060]

For so wierd reason when I try to use the GMS it just make one loud noise..

[@truthteachers]

Hi bro, this is quite dangerous at this moment as the latest browers are screwed-up. After defining a series of transformation on a class, e.g. ".box {}" and the ".box::before", if then if i did a hover on the ".box" class, the hover effect happens not the original class but on class after all the transform have taken effect. Using transform and direct transformation properties has very significant different reactions which could mess up the page. I would send you the code you so could test but how do i do that...?

[@hunghung9537]

Z dimension is important if you want to overlap image.

[@abdoellhathiev9062]

nice info, thanks kyle

[@jenstornell]

I think example two could be solved by specifying that the rotate custom property is a number. Look at Lea Verous videos.

[@theohallenius8882]

Last time I used scale() it messed up everything inside the html tag and made text selection not possible, so I will stick to transform: scale .

[@Lee-zh2mc]

arrow forward once to get "Analog app 1 TE" like he uses in the video or simply find one you'd like to use alternatively instead.

[@sobanya_228]

Wow, Safarie 14 supports this and I've never even heard about it

[@gabrielalves8643]

Amazing. Thanks you man!

[@bloodylupin]

That's a game changer, thanks for the info 💎

[@vasyaqwe2087]

Can anybody share a link where I can look at the browsers compatibility?

[@aryavbhola3066]

Damn, i remember figuring out how to use all properties in transform as if i do it in another line it overwrite the previous property

[@StrayKev]

Thanks for the video! This is a game changer

[@komakaze1]

How is performance?

[@devviz]

plain css so it should be very smooth

[@markopolo2224]

can you make a video about how to apply animation like fading in for example for a div only when it appears on screen and for it to also fade out when scrolled past it? i been trying to find a way but so far it only works in one way and not the other thanks.

[@ontheruntonowhere]

You can't do it with CSS alone, but it's easy with a little javascript. Check out intersection observer: kzbin.info/www/bejne/aHrFg6egmt9pl8k

[@zainax4099]

send you the link of it

[@palandrascsokan638]

I used transform a few times before, but one thing I don't understand why does my code look different sometimes in Codepen and in regular browser window? Basically is the same code.

[@CSSWeekly]

Codepen, by default, includes a CSS reset (Normalize); so if you do not include one manually, it could be a culprit for minor differences.

[@michelaveline]

Always good news!

[@davydo7566]

I recently just learnt abt perspective cos I had to make a transform card.. comes in handy

[@williamcozzapereira8886]

Thank you very much man

[@BostYT]

6:12 This is stupid, you can literally also animate the transform property. 6:16 Like I said, it's not impossible, and someone "Siema tu mati" said that you can animate custom properties.

[@threeone6012]

I don't need to support IE. Will start using this now.

[@jerryfleurival]

This is nice eliminating the word "Transform" when we already know the meaning of Scale, Rotate, and Translate. This is overdue. I hope this gets recommended by W3C.

[@Nodsaibot]

great for the CSSbattle (cssgolf)

[@mohamedyoussef8835]

Awesome info 😃😃

[@callMeMahfuz]

Thanks for latest information

[@cool_scatter]

Tailwind abstracts it away anyway, I haven’t written a transform property in ages. 😊

[@3WL2]

Thats like saying KFC sells chicken, I haven't made chicken myself in ages. Maybe you don't use transform, but you aren't every developer on the web.

[@cool_scatter]

@@3WL2 Where did I claim to be?

[@WrathfulFakey]

yeah but it only is supported in Firefox, isn't it? i believe it's still not supported enough to use it and think it works for everyone

[@helw7]

CSS Transform Is Dead?? No, definitely not! Both have their own pros and cons

[@youcube291]

Thanks for information

[@ospha1]

Love your tutorials. Can you show how to work ssl into express server to use https?

[@yusufsaify6735]

Awesome man great👍🏻

[@wavesky_pv]

Documentation source or something?

[@nxtaaa]

MDN all day every day

[@Karthik-ug8ll]

Hey kyle,thanks for awesome videos.can you please make video on bundling react project with webpack.this is my humble request.i didnt find single video on bundling of create react app project with webpack 5 or 4.

[@AkashYadav-pq6de]

thanks for the video

[@abhisheksawant2376]

You are not going to want to use transform but you still have to because browser support. Chrome added these properties just this month. Not everyone updates their browsers. Please wait before jumping to this for your production code.