Thank you Sir, as a backend dev, I really appreciate your content to make me understand these principles. Please can you do a similar video on animate ?
09:48 Worth to note that transform functions can be used more than once inside transform property and that order of transform functions matters: transform: translateX(100px, 100px) scale(2); transform: scale(2) translateX(100px, 100px); They dont give the same result
Thank you for video! Super informative! One more thing to mention about transform, is that it should be used for animations instead of positioning (right, top, etc...) Position changes are heavy rendering every pixel, while transform is more smooth and less resource-intensive (causes less fps drops).
Hi Kyle, Thanks for your illuminating presentations. Read much about Transforms. But watching you discuss its depth today, made a Lotta difference. I do have a worry, on a different property, 'float'! It appears to be outta favor today! Any idea why? Is there any other way of getting text to flow around or beside an image? Why is the literature villifying the 'float' property?
Thanks for another great video, but imo if you used "transition" property on parent element, understanding transform properties would be much more easier.
for the transform property the order does matter for that functions. I hoping you'll mention that too. Also transform-origin is also not mentioned. :sad:
for example: .transform-3d { transform: translate3D(20px, 20px, 40px); } .transform-3d override { // here can we override only y axis without disturbing the x and z axis values } is it possible to override only y axis without disturbing x and z axis ? (inside override class)
I am new to CSS/HTML, and I am having trouble understanding the last part. Why would you creat two classes(big, move)? Can't you just for example creat class .change and overide both translateX and scale at the same time. Isn't the end result the same as .move.big?
me today in my head : " I need to add some animations to my app soon...maybe...hmmm" youtube : The future is written and I know..I know you need this tutorial!!!
Thank you for the great tutorials. I would like to ask about HTML. Is there a way to do partials?. I mean, if the project is large, we can make partial files for Nav.html and sidebar.html and so on. Then we can include them in the main html file index.html. like Include nav.html Or link src;nav.html Is that possible in any way? Thank you
I hate CSS. Having been doing nothing but frontend web development over the past couple months, I came to realize that I belong into the backend. It's good to know, but I will not be working with it profesionally.
You are the best in CSS. Just today I was struggling with transform, then an hour later you upload this. God answers prayers!
why did you thank god for somebody works is beyond me.
@@nguyenhanh9479 lol, god rushes to take all the credit
@@nguyenhanh9479 How people like are ungrateful for God's blessings is beyond me lol
@@seddeknadhem5638 so when youtube put ads in mid video because god agree with that huh.
@@nguyenhanh9479 Aren't you a funny one? stick to stand up comedy and let TH-cam comments for us believers.
we love your css and react coursee ❤️
And JavaScript simplified alsooo
I really hope that one day you will create a complete backend course. I'd pay for that.
il love translation in css. this is one of the biggest revolution in CSS.
A short but complete and clear explanation. thanks.
Thank you Sir, as a backend dev, I really appreciate your content to make me understand these principles. Please can you do a similar video on animate ?
Finally you made a video about this transition thing
Been struggling with it for too long
09:48 Worth to note that transform functions can be used more than once inside transform property
and that order of transform functions matters:
transform: translateX(100px, 100px) scale(2);
transform: scale(2) translateX(100px, 100px);
They dont give the same result
"maybe just center an object".....
backend developers: silent cry
I didn't understood that 😅
can u Explain ?
I think is also worthy to mention transform-origin style and order of applying transformation
Thank you for video! Super informative!
One more thing to mention about transform, is that it should be used for animations instead of positioning (right, top, etc...)
Position changes are heavy rendering every pixel, while transform is more smooth and less resource-intensive (causes less fps drops).
congratulations for 1 million subscriber,,,,,,,,😍😍😍😍💯💯💯
U deserve more Subs ♥😉
Your content is always great bro, thanks
Web Dev Simplified indeed, cheers man!
Your videos r the shit dude started my fire base react project after seeing how easy it was for you
Great content, clear articulation and outstanding at navigating the viewer. Thank you
Thank you for making these great videos. Very Helpful indeed. Cheers.
Absolute masterpiece.
This helped me alot.
This video was gold 🙏🏻
Kyle you rock. Love your channel.
The last tip is so useful! Thanks for sharing.
This is so wonderful...i love this so much😍😍😍😍😍😍😍
Very easy to understand
Thanks Kyle from Argentina!
Just completed watching whole playlist
Fantastic content as always, thank you Kyle!
You have helped me a lot with your tutorials. Thank you!
his premium courses are awesome.....
Good video: helpful! It would have been nice if you'd gone over the ordering of 3d rotations as well.
A BIG BIG help! Thanks a ton!
Thank you for this explanation, its brilliant.
You are the best !!!!!❤
Great 👏 stuff ..
This was a wonderful video - thank you, very informative and helpful
Thanks, this was really helpful.
Big like for this man thank you 💜❤️
Wow this is legit, thanks for sharing
Like always this video was veryyyyyyyyyyy helpful for me ,thanks a lot.💜💜
dude i dont know about transform bt i like your hair
I like it too
Thank you. Hope I make it big so I can retribute you the right way.
Very useful content, thank you!
Thanks! Very helpful.
Amazing tutorial ♥️
transform literally helped with some overflow issues on the y axis on mobile iOS safari. Thanks a bunch.
Hi Kyle,
Thanks for your illuminating presentations. Read much about Transforms. But watching you discuss its depth today, made a Lotta difference.
I do have a worry, on a different property, 'float'! It appears to be outta favor today! Any idea why? Is there any other way of getting text to flow around or beside an image? Why is the literature villifying the 'float' property?
Hello, Kyle
can you make a video of global css styles or default css starter styles that every css should have.? I'm struggling with this a lot.
Very helpful Thankyou
I am doing your google drive clone which is great thank you
@Ameer Hamza th-cam.com/video/746xBN3Fs9k/w-d-xo.html
Just WOW ❤
for RotateY(positive values), does it rotate in the clockwise direction? Or did he have those mixed up explaining it?
Thank You Brother
Amazing 👏 ..
HVALA LJUBI TE BRAT
You are good my friend
Awesome tutorial
Great work
Thanks for another great video, but imo if you used "transition" property on parent element, understanding transform properties would be much more easier.
thanks alot kyle
congrats.
really well explained, helped me a lot and thats the way i would explain it to students if i would be a teacher
Hey, can you do a video about putting google adsense ads on your react website or general monetisation
I would like to learn more of animations, transitions in react. With no libs, just css please
@carolinq galassi th-cam.com/video/746xBN3Fs9k/w-d-xo.html
I like your content, have you ever done tutorials regarding manipulating css or html dom inside JavaScript?
CSS: easy to learn, good luck mastering.
great video thx
for the transform property the order does matter for that functions. I hoping you'll mention that too. Also transform-origin is also not mentioned. :sad:
Thank you a lot
thanks 👍
palmas pra vc, ótimo vídeo
for example:
.transform-3d {
transform: translate3D(20px, 20px, 40px);
}
.transform-3d override {
// here can we override only y axis without disturbing the x and z axis values
}
is it possible to override only y axis without disturbing x and z axis ? (inside override class)
Using custom properties to modify each value individually it's the better way to do that
@@Laura69 thanks for the reply. so basically you are saying that using css variables in this context. (just to correct my knowledge)
Yeah, Kyle even said that near the end of the video, working with transforms without CSS variables it's much harder
@@Laura69 Thank you very much
I am new to CSS/HTML, and I am having trouble understanding the last part. Why would you creat two classes(big, move)? Can't you just for example creat class .change and overide both translateX and scale at the same time. Isn't the end result the same as .move.big?
the main takeaway i got from this video is
using variables 🤦
saves a lot of time and memory
what do you use for recording bro
When are we finally gonna hear you play some sick licks on that guitar?
me today in my head : " I need to add some animations to my app soon...maybe...hmmm"
youtube : The future is written and I know..I know you need this tutorial!!!
Please do some tutorials for tailwind
Amazing
how do you watch your code while your writing it
thank you
why your voice is so relaxing...😑.. (sorry).. outstanding tutorial tbh
Thank you for the great tutorials.
I would like to ask about HTML. Is there a way to do partials?. I mean, if the project is large, we can make partial files for Nav.html and sidebar.html and so on.
Then we can include them in the main html file index.html. like
Include nav.html
Or
link src;nav.html
Is that possible in any way?
Thank you
You could use a framework like Vue or React. Earlier people could use JQuery for that, but not recommending.
Who is seeing the background of this video's thumbnail? 😁
helpful
You are God!
I hate CSS. Having been doing nothing but frontend web development over the past couple months, I came to realize that I belong into the backend. It's good to know, but I will not be working with it profesionally.
Kyle in brazil ( Portuguese ) sound as same as Caio, my name
Which linux does he use?
I think it's called "Windows"
nice.
First
talking about 2D rotation and not mentioning the point around which rotation is happening could not be good tutorial
99%
ez
This guy is a css God to show he isn't using a script hes talking fast, sorry bro you a bad teacher
you talk to fast
thanks a lot
Bro can you make videos by link external css file . Sometime it get confused with html codes and css codes
Thank You, really helpful
Thank you very much