CSS Transform Is Dead! Use This Instead
HTML-код
- Опубликовано: 27 июл 2024
- CSS is adding lots of new features and some of the smaller quality of life features they added recently were the addition of the translate, rotate, and scale properties. These properties almost entirely remove the need to use the transform property which is incredibly nice since there are tons possibilities this opens up that were very difficult if not impossible before.
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
⏱️ Timestamps:
00:00 - Introduction
01:45 - Scale
02:17 - Translate
02:48 - Rotate
04:02 - Example 1
05:10 - Example 2
#CSSTransform #WDS #CSS
![MORTAL KOMBAT 1 - KOMBAT PACK 2 REVEAL TRAILER!! [REACTION]](http://i.ytimg.com/vi/Mi2M58zEQVc/mqdefault.jpg)
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.
Getting to use that in projects 3-5 years from now will be amazing.
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
@@wallacesantos0 all good, unless you plan to support iPhones. IE didn't go anywhere, nowadays we just call it Safari.
@@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.
Time to write a webpack loader then.
@@IZR194 iOS supports this since version 14.1
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.
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.
@@chinhtrung6130 agree
Actually your videos are so much fun to watch it's like getting entertainment and information at the same time... Great job Kyle... 🙌🏻🙌🏻🤩
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
Great video as usual 👌 Thank you, Kyle! Will it work also for styled components?
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.
Great video. To the point and really good examples. Was able to watch this and now can use scale, rotate, translate. Thanks!
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???
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
not anymore my friend.. :D
Still popular in Japan
@@yestermonth wait what?
@@theodorealenas3171 Yeah, a lot of Japanese institution still heavily rely on IE, part of the reason why Microsoft haven't fully phased it out.
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?
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
I got say man this really makes web development simplified 😇
Also want a seperate video of you playing that awesome guitar at the back 😂🤣 it's been with us in our entire journey
hey guys, before you use this new feature, make sure to check its compatibility with the browsers on caniuse or MDN.
Yeah there are do many great properties we can't use because companies still using old browser versions:(
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?
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.
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?
My best suggestion is to simply try it. Also kind of strange that those two have different results.
@@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.
@@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.
Hi Kyle. Can you please mention the sites where you read about front-end development things
He is sitting there to save your time, make you smile while staring at your code running in awesome way.
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.
useful and well explained, thanks
This is a great feature for who always writing " translate: transform(); " every time ! :D
ohh yeah. that happens to me as well
You got it backwards
Do you still need to use transform-origin or how do you change that value for the new individual properties?
softs it was really confusing but thanks to you I've gotten more professional at it!! ✌
That's a game changer, thanks for the info 💎
Great!! Thanks for sharing your knowledge!
Why do i have a feeling you actually suggested these changes to the css team, this really simpifies our lives, webdev indeed simpified
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
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
Congratulations for 1million subscribers... 👍👍👍👍
Love from India 💓💓
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.
please make videos on new css/Javascript features regularly
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...?
How could I substitute something like transform: rotate(45deg); transform-origin: 0 0 with this separate rotate property?
Love your tutorials.
Can you show how to work ssl into express server to use https?
Thanks for the
information
Great. Informative video.
Thanks for the video! This is a game changer
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.
You can't do it with CSS alone, but it's easy with a little javascript. Check out intersection observer: ruclips.net/video/2IbRtjez6ag/видео.html
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!
Just use flexbox
@@Rust_Rust_Rust just read
@@ggorg0 just use margin: auto
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?
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?
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.
@@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
I agree, be straight up with the titling and descriptions of videos. I hate clickbait cr*p.
having clickbait doesn't change the content of the video tho, it's just there to attract more attention and play with RUclips algorithm
@@NoeruCranel 80% is still insufficient amount tho
do new properties mess up z-index stacking like transform does?
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?
What about transform origin? Is there an equivalent for these properties?
This is so great. I hope we get parent-relative units soon.
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.
Nice! Thanks for sharing!
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 .
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.
Super 👌 bro clear cut explanation
"rotate: x/y/z + angle" rule is not supported in Safari, but it's fine, I guess
finally ! no need to keep the state with multiple transform elements, thank
What about transform-origin? Is it applicable to new props?
As always, thank you, Kyle.
how i can make transform: rotatex(20deg) rotate(30deg) by the new css feature
very nice dude but how much memory eats a rotating box ?
Oh, I goodly want to hear so!
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.
I think example two could be solved by specifying that the rotate custom property is a number. Look at Lea Verous videos.
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.
I have this issue - it’s a minor OCD thing (I also obsessively clear my throat).
Is it supported by all Browsers ? Can't seem to find any info on that? Especially wondering about Chrome, Firefox and Safari?
I recently just learnt abt perspective cos I had to make a transform card.. comes in handy
Amazing. Thanks you man!
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.
Codepen, by default, includes a CSS reset (Normalize); so if you do not include one manually, it could be a culprit for minor differences.
For so wierd reason when I try to use the GMS it just make one loud noise..
nice info, thanks kyle
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.
Z dimension is important if you want to overlap image.
Have any conflict between transform: translate and translate?
Thanks for latest information
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
Can anybody share a link where I can look at the browsers compatibility?
Rotation is cool. I like it. Now I am using it.
Wow, Safarie 14 supports this and I've never even heard about it
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.
Awesome man great👍🏻
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
Awesome info 😃😃
6:44 And matrix3d, I need my matrix3d to create proper looking flippy floppies.
Thank you very much man
Finally, it came 🤗🤗🤗
Always good news!
We could solve problem 2 with the @property directive
I want this to happen for filter
For example
blur: 20px;
hue-rotate: 45deg;
instead of
filter: blur(20px) hue-rotate(45deg);
You forgot to add the supported platforms or browsers and the version of CSS required for this.
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
FINALLY!
IT'S ABOUT FREAKING TIME
Thanks for information
but what about transformOrigin...?
Nice tutorialiii
send you the link of it
Finally. This is awesome.
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
Me, last week: Wow, this transform property came in handy. I'll probably use it a lot from now on
0:01
great for the CSSbattle (cssgolf)
thanks for the video
5:40 actually you can animate custom properties but only after u define their type.
example:
@property --rotate {
syntax: '';
inherits: false;
initial-value: 0deg;
}
Kyle doesn't really know what he's talking about, throwing around false claims
Firefox doesn't support custom properties
But we used to use 3d transforms specifically because they would trigger hardware acceleration to make for smoother animations
No
I thought this will be about transformers like PostCSS.
How is performance?
plain css so it should be very smooth
What about @property to give a type to the custom property. That allows you to animate css custom properties.
Project Houdini seems like it will provide some nice things. I think it might be a bit before it gets rolled out properly though.
It is great, I use with tranform to have individual properties for every transform for easy manipulation,
but still not supported everywhere the CSS Properties and Values API.
@@Laura69 Yes I've seen some great examples. I should look into it again soon.