Learn CSS Transform In 15 Minutes

[@hardwired66]

we love your css and react coursee ❤️

[@prashantindurkar]

And JavaScript simplified alsooo

[@larrywary4991]

You are the best in CSS. Just today I was struggling with transform, then an hour later you upload this. God answers prayers!

[@nguyenhanh9479]

why did you thank god for somebody works is beyond me.

[@deveighteen6302]

@@nguyenhanh9479 lol, god rushes to take all the credit

[@seddeknadhem5638]

@@nguyenhanh9479 How people like are ungrateful for God's blessings is beyond me lol

[@nguyenhanh9479]

@@seddeknadhem5638 so when youtube put ads in mid video because god agree with that huh.

[@seddeknadhem5638]

@@nguyenhanh9479 Aren't you a funny one? stick to stand up comedy and let KZbin comments for us believers.

[@pawanshrestha3823]

I really hope that one day you will create a complete backend course. I'd pay for that.

[@mouhamaddiop1144]

il love translation in css. this is one of the biggest revolution in CSS.

[@carmenmanuela8747]

A short but complete and clear explanation. thanks.

[@FullStackDevGreg]

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 ?

[@DGronki]

I think is also worthy to mention transform-origin style and order of applying transformation

[@Laura69]

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

[@AdelAdel-pn1bq]

Finally you made a video about this transition thing Been struggling with it for too long

[@rinojunior5238]

"maybe just center an object"..... backend developers: silent cry

[@sameer07x19]

I didn't understood that 😅 can u Explain ?

[@ProgrammerLover]

congratulations for 1 million subscriber,,,,,,,,😍😍😍😍💯💯💯

[@Dan-p7f]

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).

[@solo_1-b7b]

dude i dont know about transform bt i like your hair

[@meliyomollameles]

I like it too

[@aburayhan1897]

Just completed watching whole playlist

[@margueritebainbridge9281]

Great content, clear articulation and outstanding at navigating the viewer. Thank you

[@johnkeck]

Good video: helpful! It would have been nice if you'd gone over the ordering of 3d rotations as well.

[@chandrakant6283]

Absolute masterpiece. This helped me alot.

[@linchen5913]

The last tip is so useful! Thanks for sharing.

[@mahmudapon8681]

his premium courses are awesome.....

[@Niqqo]

Web Dev Simplified indeed, cheers man!

[@alejandronieto576]

Thanks Kyle from Argentina!

[@KgopotsoNtuli]

Your content is always great bro, thanks

[@maccharlesobani9521]

This is so wonderful...i love this so much😍😍😍😍😍😍😍 Very easy to understand

[@bones1225]

Kyle you rock. Love your channel.

[@blazinghaze9151]

This video was gold 🙏🏻

[@anticsBack]

Fantastic content as always, thank you Kyle!

[@CrackerJayherber]

You have helped me a lot with your tutorials. Thank you!

[@sameer07x19]

U deserve more Subs ♥😉

[@cam0cazi]

Your videos r the shit dude started my fire base react project after seeing how easy it was for you

[@rediettadesse5488]

Thank you for this explanation, its brilliant.

[@fraserlock-macardy9633]

Thank you for making these great videos. Very Helpful indeed. Cheers.

[@ayanchowdhury7303]

A BIG BIG help! Thanks a ton!

[@InterestingLake]

Thanks! Very helpful.

[@InterestingLake]

Thanks, this was really helpful.

[@sahul._]

Great 👏 stuff ..

[@ab-zg8pt]

Thanks for teaching us, Papi

[@jaydenmoon1165]

This was a wonderful video - thank you, very informative and helpful

[@arifazaidi3933]

You are the best !!!!!❤

[@khaleds5627]

Big like for this man thank you 💜❤️

[@samandarboymurodov8941]

Very useful content, thank you!

[@andy_frank]

Thank you. Hope I make it big so I can retribute you the right way.

[@sakinebarati7448]

Like always this video was veryyyyyyyyyyy helpful for me ,thanks a lot.💜💜

[@Skalexsong]

Wow this is legit, thanks for sharing

[@shivansh901]

Thanks for another great video, but imo if you used "transition" property on parent element, understanding transform properties would be much more easier.

[@satriauno3011]

Very helpful Thankyou

[@muhammadsohaib9673]

Amazing tutorial ♥️

[@hansakashehan3339]

Thank You Brother

[@NedumEze]

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?

[@jrTilak]

Just WOW ❤

[@Ameersoccerdev]

I am doing your google drive clone which is great thank you

[@domxon]

@Ameer Hamza kzbin.info/www/bejne/bWWZqXWEaKumb80

[@502amvideos8]

thanks alot kyle

[@snakeeyesOFFICIAL76]

You are good my friend

[@abdullahtanveer316]

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.

[@NiceChange]

Great work

[@Talel_kraiem]

Amazing 👏 ..

[@sonamuhialdeen7866]

Awesome tutorial

[@igorbudimir573]

HVALA LJUBI TE BRAT

[@NganNguyen-ww1ez]

Thank you a lot

[@carolinagalassi2922]

I would like to learn more of animations, transitions in react. With no libs, just css please

[@domxon]

@carolinq galassi kzbin.info/www/bejne/bWWZqXWEaKumb80

[@DaPaBe1999]

I like your content, have you ever done tutorials regarding manipulating css or html dom inside JavaScript?

[@sherwan-yt]

thanks 👍

[@genjioto]

transform literally helped with some overflow issues on the y axis on mobile iOS safari. Thanks a bunch.

[@genjioto]

CSS: easy to learn, good luck mastering.

[@badshifu]

for RotateY(positive values), does it rotate in the clockwise direction? Or did he have those mixed up explaining it?

[@atom6202]

Hey, can you do a video about putting google adsense ads on your react website or general monetisation

[@anurajms]

thank you

[@axi_uz1009]

what do you use for recording bro

[@yoman9446]

Please do some tutorials for tailwind

[@mohammedamer7896]

great video thx

[@yzap_]

palmas pra vc, ótimo vídeo

[@MrOnais321]

Amazing

[@ptolemny]

When are we finally gonna hear you play some sick licks on that guitar?

[@anonymousshooter3636]

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)

[@Laura69]

Using custom properties to modify each value individually it's the better way to do that

[@anonymousshooter3636]

@@Laura69 thanks for the reply. so basically you are saying that using css variables in this context. (just to correct my knowledge)

[@Laura69]

Yeah, Kyle even said that near the end of the video, working with transforms without CSS variables it's much harder

[@anonymousshooter3636]

@@Laura69 Thank you very much

[@whoman7930]

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:

[@chhavimanichoubey9437]

the main takeaway i got from this video is using variables 🤦 saves a lot of time and memory

[@mariogabry782]

congrats. really well explained, helped me a lot and thats the way i would explain it to students if i would be a teacher

[@BioxyTube]

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!!!

[@mihailvelikov]

helpful

[@DeecafTV]

how do you watch your code while your writing it

[@aklimaakterrimi3814]

why your voice is so relaxing...😑.. (sorry).. outstanding tutorial tbh

[@julijangorenc5819]

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?

[@ankitsaiyan6151]

You are God!

[@Fshhady]

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

[@justanotherhotguy]

You could use a framework like Vue or React. Earlier people could use JQuery for that, but not recommending.

[@DEV_XO]

nice.

[@caiofernandes5074]

Kyle in brazil ( Portuguese ) sound as same as Caio, my name

[@vedantthombare1028]

Who is seeing the background of this video's thumbnail? 😁

[@amindhahri2542]

Which linux does he use?

[@Shrumpf]

I think it's called "Windows"

[@sumabich721]

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.

[@Ameersoccerdev]

First

[@dalicodes]

99%

[@ridl27]

ez

[@thrasosthrasos7353]

talking about 2D rotation and not mentioning the point around which rotation is happening could not be good tutorial

[@chorkaniitv3386]

This guy is a css God to show he isn't using a script hes talking fast, sorry bro you a bad teacher

[@camilobriceno1712]

you talk to fast

[@preciousgodwin239]

thanks a lot

[@MAGAVISHNUT]

Bro can you make videos by link external css file . Sometime it get confused with html codes and css codes

[@usernameutf-8844]

Thank You, really helpful

[@intensiveadvancedmath5281]

Thank you very much