#30 CSS Transform Property - CSS Full Tutorial

แชร์
ฝัง
  • เผยแพร่เมื่อ 30 พ.ย. 2024

ความคิดเห็น • 152

  • @marufkhan23508
    @marufkhan23508 4 ปีที่แล้ว +49

    This channel is a must for newbie frontend developers. You're wroking so hard, and that's the point you deserve more attention.

    • @DevDreamer
      @DevDreamer  4 ปีที่แล้ว +2

      Thanks for the awesome comment Maruf, this means a lot 😊

    • @subeeshkottay6628
      @subeeshkottay6628 3 ปีที่แล้ว

      That's true bro.. The quality of the content and the way you manged the content is really simple and easy to understand. Good job brother.. Wish you add more content for responsive design and front end frameworks..

    • @zobaerahmedzihad7805
      @zobaerahmedzihad7805 3 ปีที่แล้ว +1

      Hey Maruf..
      Where are you From..?? Are you From Bangladesh..??

    • @marufkhan23508
      @marufkhan23508 3 ปีที่แล้ว

      @@zobaerahmedzihad7805 yes 🇧🇩

    • @zobaerahmedzihad7805
      @zobaerahmedzihad7805 3 ปีที่แล้ว

      @@marufkhan23508 WOW...!! That's great. I'm Also From Bangladesh.
      Where in Bangladesh do you live..?? (By the way I'm From Barishal).

  • @DevDreamer
    @DevDreamer  4 ปีที่แล้ว +2

    Hey guys, I just wanted to say thank you all for the amazing support! Once you’ve watched this video on CSS Transforms, check out the latest video ‘The Complete Guide to CSS Flexbox’ here - th-cam.com/video/-DNLYk5uzl8/w-d-xo.html
    If you found this video helpful, please be sure to Like and Subscribe 👍

  • @erodey3133
    @erodey3133 4 ปีที่แล้ว +28

    No way you have such few subs, you deserve more

    • @DevDreamer
      @DevDreamer  4 ปีที่แล้ว +2

      Thank you Yernar 🙂 New content coming soon 👍

    • @Jester2b04
      @Jester2b04 4 ปีที่แล้ว +3

      I agree. Well deserved Subs

  • @devgarg7469
    @devgarg7469 4 ปีที่แล้ว +2

    Great explanation... Love from India

    • @DevDreamer
      @DevDreamer  4 ปีที่แล้ว

      Hey Dev Garg, thank you so much! 🇮🇳 🙂👍

  • @carlosanaya9070
    @carlosanaya9070 2 ปีที่แล้ว +1

    Thanks for such great videos. Greetings from El Salvador.

  • @lonnietarrant3681
    @lonnietarrant3681 5 ปีที่แล้ว +6

    Fast and to the point

    • @DevDreamer
      @DevDreamer  5 ปีที่แล้ว

      Thanks for the support Lonnie! 😊👍

  • @sardorbeksardorbek2083
    @sardorbeksardorbek2083 3 ปีที่แล้ว +1

    Wooow amazing channel for front-end developers, i love thi schannel, thank you so much

  • @gouravkumar6697
    @gouravkumar6697 3 ปีที่แล้ว +5

    My homie deserves more subs. Great explanations and voice 🙌😍

    • @DevDreamer
      @DevDreamer  3 ปีที่แล้ว +1

      🔥 Hey Gourav! Thank you so much, appreciate it brother 🙂👍

  • @karmenb.7907
    @karmenb.7907 3 ปีที่แล้ว +2

    Your explanations are so clear and detailed. Thank you for that, you're making it easy!

    • @DevDreamer
      @DevDreamer  3 ปีที่แล้ว

      🔥 Hey Karmen! Thank you for watching, really glad you’re finding the content useful. That’s my aim, to break this stuff down so it’s easy to learn. Thank you for the amazing support, I appreciate you 🙂👍

  • @mdabullais2114
    @mdabullais2114 4 ปีที่แล้ว +5

    I think you had to be 1M subs guy for the quality of your vids.

    • @DevDreamer
      @DevDreamer  4 ปีที่แล้ว +1

      Hi md abullais, this is one of the best comments I've ever received 😊 Thank you for your support, if I ever hit 1M subs I'll be sure to remember your comment 😎👍

  • @matiastoso1977
    @matiastoso1977 4 ปีที่แล้ว +1

    Thanks for the video!! I'm watching this video from Argentina

    • @DevDreamer
      @DevDreamer  4 ปีที่แล้ว +1

      Hey Matias! That's awesome, thank you so much for watching! I appreciate your support, Muchas gracias 🙂👍

  • @nassimback
    @nassimback 3 ปีที่แล้ว +1

    i love the fact that ur creating this video in 60fps ,trully !!

  • @philipowino-jofon
    @philipowino-jofon 2 ปีที่แล้ว +1

    Man you are amazing. Finally I get this stuff

    • @DevDreamer
      @DevDreamer  2 ปีที่แล้ว

      Thanks brother 🙂👍

  • @AlecHalePletka
    @AlecHalePletka 4 ปีที่แล้ว +5

    Quick, clean, helpful & well organized. Love the content ! Wish I found you sooner

    • @DevDreamer
      @DevDreamer  4 ปีที่แล้ว +1

      Hi Alec! Thank you so much for the kind and encouraging words, thanks for the support, please stay tuned for more 🙂👍

    • @AlecHalePletka
      @AlecHalePletka 4 ปีที่แล้ว +1

      @@DevDreamer Will do!

  • @Explore2Adore
    @Explore2Adore 4 ปีที่แล้ว +6

    A simple clear tutorial, will be playing with this property tomorrow.
    Thanks Amit, a simple and clear tutorial 🙂👍 Hope you get more subs, you present well and have clear audio.

    • @DevDreamer
      @DevDreamer  4 ปีที่แล้ว +1

      Hey Gary, thank you so much! This means a lot 🙂👍

    • @Explore2Adore
      @Explore2Adore 4 ปีที่แล้ว +1

      @@DevDreamer you are welcome

  • @dylanm7638
    @dylanm7638 3 ปีที่แล้ว +1

    saved lot of times, thanks a lot

  • @themantra1997
    @themantra1997 2 ปีที่แล้ว

    Buddy pls going on like this because you explain everything in more details

  • @amalmokhtar3739
    @amalmokhtar3739 4 ปีที่แล้ว +1

    clear and fast explanation, thank you so much, it helped me a lot!

    • @DevDreamer
      @DevDreamer  4 ปีที่แล้ว

      Hey molly! Thank you for the awesome support! 🙂👍

  • @shubhamarora547
    @shubhamarora547 5 ปีที่แล้ว +2

    very nice explanation.

    • @DevDreamer
      @DevDreamer  5 ปีที่แล้ว

      Thanks shubham 👍

  • @DeepakSharma-fe3gl
    @DeepakSharma-fe3gl 4 ปีที่แล้ว +1

    saw your videos for the first time & subscribed it first then liked it.... nice video

    • @DevDreamer
      @DevDreamer  4 ปีที่แล้ว

      Hi Deepak, thanks so much! Your support means the world to me, and I appreciate it very much. More to come soon 🙂👍

  • @GuitarreroDaniel
    @GuitarreroDaniel 4 ปีที่แล้ว +1

    What an stellar explanation my friend, please keep going!

    • @DevDreamer
      @DevDreamer  4 ปีที่แล้ว

      Hey Daniel Fuzzo! Thank you so much, I really appreciate your support 😃 I know it's been a while, but plans are in place to go big very soon 🙂

  • @gloverjoshua4422
    @gloverjoshua4422 3 ปีที่แล้ว +2

    Thanks Very Helpful Bro

    • @DevDreamer
      @DevDreamer  3 ปีที่แล้ว

      Happy to help 🙂👍

  • @kjetilmoen9863
    @kjetilmoen9863 4 ปีที่แล้ว +1

    Well explained, did understand quite a little but this was very helpfull, thanks!

    • @DevDreamer
      @DevDreamer  4 ปีที่แล้ว

      Hey Splew, thanks for watching. Anything I can help further with?

  • @ibrahimkedir2280
    @ibrahimkedir2280 3 ปีที่แล้ว +1

    Cheers mate, that was helpful.

  • @Malika-qi8bm
    @Malika-qi8bm 4 ปีที่แล้ว +1

    why have you stopped making the videos, ? These explanations are so solid and on point

    • @DevDreamer
      @DevDreamer  4 ปีที่แล้ว

      Hi Touxif, new videos are in the making. I know it's been a while, I may do a video explaining where I've been but for now just know (and anyone else who's reading this) that Dev Dreamer will be back very soon!

  • @bharathau8085
    @bharathau8085 3 ปีที่แล้ว +2

    Awesome Design!

    • @DevDreamer
      @DevDreamer  3 ปีที่แล้ว

      Hey Bharatha, thanks again 🙂👍

  • @ashadahmad651
    @ashadahmad651 4 ปีที่แล้ว +3

    The content looks so professionally curated, man how you have less subscribers.

    • @DevDreamer
      @DevDreamer  4 ปีที่แล้ว +1

      Hey Ashad! Thanks for the great comment brother, I’m growing everyday with the support from you guys, so thank you 🙂👍

  • @zobaerahmedzihad7805
    @zobaerahmedzihad7805 3 ปีที่แล้ว +1

    WOW that's great. I love it. Go ahead.. 💟

  • @doggo9757
    @doggo9757 3 ปีที่แล้ว +2

    Thank you for such amazing content. It will really help me a lot. You deserve more subs.

    • @DevDreamer
      @DevDreamer  3 ปีที่แล้ว

      Hey doggo! Thank you so much 🙂👍

  • @przemysawkowalczyk3049
    @przemysawkowalczyk3049 3 ปีที่แล้ว

    Thanks, nice video. Was very helpful

  • @Tamima_Chy
    @Tamima_Chy 3 ปีที่แล้ว +1

    Nice video...It's very helpfull for me

    • @DevDreamer
      @DevDreamer  3 ปีที่แล้ว

      It's my pleasure 🙂👍

  • @sazzadislam3129
    @sazzadislam3129 3 ปีที่แล้ว +1

    Thanks for the video is very helpful Thanks a lot

    • @DevDreamer
      @DevDreamer  3 ปีที่แล้ว

      Hey Sazzad, thank you for watching brother 🙂👍

  • @MicahJohns
    @MicahJohns 4 ปีที่แล้ว +1

    Thanks for making this video!

    • @DevDreamer
      @DevDreamer  4 ปีที่แล้ว

      Thanks for watching Micah! 🙂👍

  • @freelancerrifat0105
    @freelancerrifat0105 3 ปีที่แล้ว

    It's varry helpfull video...thanks brooo

  • @WackLantern
    @WackLantern 3 ปีที่แล้ว

    thanks for the explanation my dude! It was super easy to understand for me (newbie)!! Def subscribed!

  • @rummey5260
    @rummey5260 4 ปีที่แล้ว +2

    Thank u broo..!! Nice video

    • @DevDreamer
      @DevDreamer  4 ปีที่แล้ว +1

      Hey Rummey! Thank you very much for watching brother, really glad you enjoyed it 🙂👍

  • @farazk9729
    @farazk9729 3 ปีที่แล้ว +2

    Great tutorial; appreciate it :-)

    • @DevDreamer
      @DevDreamer  3 ปีที่แล้ว

      Thank you, I appreciate you 🙂👍

  • @johnnguyen1655
    @johnnguyen1655 3 ปีที่แล้ว

    Really cool explanation, thanks sooooo much!.

  • @aleshamccown2095
    @aleshamccown2095 2 ปีที่แล้ว

    Excellent! Thank you!

  • @fluffymaverick
    @fluffymaverick 3 ปีที่แล้ว +1

    Roses are red, violets are blue, TH-cam come on give this guy a million views 😂

    • @DevDreamer
      @DevDreamer  3 ปีที่แล้ว

      🔥🔥 Haha I love it, thanks so much for watching 🙂👍

  • @staffordnelson9053
    @staffordnelson9053 3 ปีที่แล้ว +1

    Thank you, Thank you and Thank you! Great

    • @DevDreamer
      @DevDreamer  3 ปีที่แล้ว

      Hey Stafford! And thank you for watching 🙂 glad you found it helpful, stay tuned for more 👍

  • @malkiatsingh3057
    @malkiatsingh3057 3 ปีที่แล้ว +2

    nice work and thanks :)

    • @DevDreamer
      @DevDreamer  3 ปีที่แล้ว +1

      Hi Malkiat Singh, thank you so much for watching 🙂👍

  • @damariis13
    @damariis13 3 ปีที่แล้ว +1

    sir I need the rotate with translate. Is that posible?

  • @jv18creator
    @jv18creator 4 ปีที่แล้ว +1

    keep up the good work

    • @DevDreamer
      @DevDreamer  4 ปีที่แล้ว +1

      Thanks for the support Jeet! 🙂👍

    • @jv18creator
      @jv18creator 4 ปีที่แล้ว +1

      @@DevDreamer sure. Always ✌

  • @barzijaf9369
    @barzijaf9369 4 ปีที่แล้ว +1

    I really enjoyed it, thank you!

    • @DevDreamer
      @DevDreamer  4 ปีที่แล้ว +1

      Hey barzi jaf! Thank you so much 😎 Really glad it helped 👍

  • @benardokwuchukwu879
    @benardokwuchukwu879 10 หลายเดือนก่อน

    You are the best 🎉

  • @Slimboyfat1979
    @Slimboyfat1979 2 ปีที่แล้ว

    Can you not use the rotate property in the matrix shorthand?

  • @anurajms
    @anurajms 2 ปีที่แล้ว +1

    thank you

  • @kevinrutledge9602
    @kevinrutledge9602 4 ปีที่แล้ว +2

    I am working on an animation. Is there a way to use translate to move the item to a specific spot on the screen no matter where it starts from?

    • @DevDreamer
      @DevDreamer  4 ปีที่แล้ว +1

      Hey Kevin, thanks for watching 🙂 Great question, as far as I'm aware there isn't. If you ever find out though, I'd love to know 👍

    • @kevinrutledge9602
      @kevinrutledge9602 4 ปีที่แล้ว

      @@DevDreamer yeah I can’t use position absolute and top and right because it isn’t animatable.

    • @DevDreamer
      @DevDreamer  4 ปีที่แล้ว

      @@kevinrutledge9602 Hey Kevin! Hope you’re doing well, did you ever manage to figure out how this is done then? 🙂

  • @iyoutome
    @iyoutome 3 ปีที่แล้ว

    Thanks brother, are you for hire for an application that is similar to this?

  • @cthulhulalala7182
    @cthulhulalala7182 3 ปีที่แล้ว +1

    Waaw instant subscription

    • @DevDreamer
      @DevDreamer  3 ปีที่แล้ว

      Thank you!! 🙂👍

  • @TA-gc3bj
    @TA-gc3bj 3 ปีที่แล้ว +2

    Thanks 😁

    • @DevDreamer
      @DevDreamer  3 ปีที่แล้ว +2

      Hey Lagi, thank you so much for watching, stay tuned for more 🙂👍

  • @RajatKhare619
    @RajatKhare619 4 ปีที่แล้ว +1

    You said rotateX and rotateY are for 3D transformations. Then what's the use for the rotate3D property?

    • @DevDreamer
      @DevDreamer  4 ปีที่แล้ว +1

      Hi Rajat! The rotate3d property is a short hand property for (x, y, z, angle) 👍

    • @RajatKhare619
      @RajatKhare619 4 ปีที่แล้ว +1

      @@DevDreamer Thanks!

  • @jake5259
    @jake5259 3 ปีที่แล้ว

    #back
    {
    transform: translateZ(-250px) rotateY(360deg);
    transform-origin: back;
    }
    does quite seem to work for me?

  • @rahmathrahmath5861
    @rahmathrahmath5861 4 ปีที่แล้ว +1

    IAM HAVING TROUBLE WITH WORKING ON ANIMATIONS USING TRANSFORMS
    On the animation (inside the @keyframes).Everything Works fine
    but when I add the transform: translate(); , the transform rotate
    become inactive then when I make transform: rotate(); active
    using Dev tools then the translate becomes inactive. My code was correct. But these things repeat.

  • @devl0pr
    @devl0pr 3 ปีที่แล้ว +1

    Thank you

    • @DevDreamer
      @DevDreamer  3 ปีที่แล้ว

      And thank you for watching 🙂👍

  • @tubespring
    @tubespring 3 ปีที่แล้ว

    Thanks for explaining the various uses of the Transform property. By the way, what is the name of the intro/outro music? Thank you.

  • @shreyasvora16
    @shreyasvora16 4 ปีที่แล้ว +1

    I'm facing some problem while using this property.
    When I'm using transform property with translate in brackets software it makes changes as I required and the elements move itself where I want but when I put cursor is at particular element in css file that I've changed it displays some lines at its old location which shouldn't be there after changes applied on the element so I request you to solve my query.

    • @DevDreamer
      @DevDreamer  4 ปีที่แล้ว

      Hi Shreyas, so sorry you're having some problems! If you add your question to stackoverflow along with the code and send me the link I can certainly take a look 🙂

  • @Bestenouf
    @Bestenouf 3 ปีที่แล้ว

    Thanks. Subscribed.

  • @Miheme2
    @Miheme2 3 ปีที่แล้ว

    danke schön, 'love from deutschland'

  • @Lucky-909
    @Lucky-909 4 ปีที่แล้ว +1

    I use Visual Studio Code but it's live server is not working so I want to know.

    • @DevDreamer
      @DevDreamer  4 ปีที่แล้ว

      Hi Madhuri, the text editor I am using in this video is brackets. Thanks for watching 🙂👍

  • @gehari7814
    @gehari7814 3 ปีที่แล้ว

    can i give the tanslate value at the percentage?

  • @niteshyadav247
    @niteshyadav247 4 ปีที่แล้ว +1

    What were they smoking when they set the order for matrix parameters?

    • @DevDreamer
      @DevDreamer  4 ปีที่แล้ว +1

      Hey Nitesh! Thanks for watching 😎👍 Yh, it is slightly odd lol.

  • @kashmirtechtv2948
    @kashmirtechtv2948 4 ปีที่แล้ว

    Yeah i got it but if there are other elements too, then will it still translate?

  • @juanpabloramos1419
    @juanpabloramos1419 4 ปีที่แล้ว +1

    Where do you get that transitions and the cartoon quality video background?

    • @DevDreamer
      @DevDreamer  4 ปีที่แล้ว

      Hey Pablo! Thank you for watching, so the animations are built in Adobe After Effects and the video background was created using a still image and looped video 👍

  • @miguelolvera3546
    @miguelolvera3546 3 ปีที่แล้ว +1

    gracias amigo

    • @DevDreamer
      @DevDreamer  3 ปีที่แล้ว

      No hay problema 🙂👍

  • @Lucky-909
    @Lucky-909 4 ปีที่แล้ว +1

    What is the application used here to edit this code???

    • @DevDreamer
      @DevDreamer  4 ปีที่แล้ว +1

      Hi Madhuri! Thanks for watching 🙂 it’s Brackets. It can be downloaded for free at brackets.io

    • @Lucky-909
      @Lucky-909 4 ปีที่แล้ว +1

      @@DevDreamer Thanks

  • @hozas8553
    @hozas8553 4 ปีที่แล้ว +1

    Good video

    • @DevDreamer
      @DevDreamer  4 ปีที่แล้ว

      Thanks young prince! Appreciate it! 👍

  • @loveparmar1284
    @loveparmar1284 4 ปีที่แล้ว +1

    Ohh i found a great channel!!!

    • @DevDreamer
      @DevDreamer  4 ปีที่แล้ว +1

      Hey Love Parmar! Thank you for the awesome support!! 😃👍

    • @loveparmar1284
      @loveparmar1284 4 ปีที่แล้ว +1

      @@DevDreamer you deserve it brother !!

  • @joseflores-cx5ld
    @joseflores-cx5ld 4 ปีที่แล้ว +1

    me sirvio :D

    • @DevDreamer
      @DevDreamer  4 ปีที่แล้ว

      Hey jose, be sure to check out the channel for more content and Subscribe 🙂👍

  • @oldguitarist-pl
    @oldguitarist-pl 4 ปีที่แล้ว +3

    like, it's useful!

    • @DevDreamer
      @DevDreamer  4 ปีที่แล้ว

      Hi m.o. thank you! Pleased it's been of use 🙂

  • @reshmasuresh6268
    @reshmasuresh6268 4 ปีที่แล้ว +1

    hello, sir...which application is used to type these codes? while I'm using atom but I like this more..so please can u tell this app?

    • @DevDreamer
      @DevDreamer  4 ปีที่แล้ว

      Hey Reshma! So this text editor is called Brackets, it can be download for free at brackets.io 🙂👍

    • @reshmasuresh6268
      @reshmasuresh6268 4 ปีที่แล้ว +1

      @@DevDreamer thank u...i will try to dwnld it...

    • @DevDreamer
      @DevDreamer  4 ปีที่แล้ว

      Awesome 🙂 and thanks for watching 👍

  • @fancybear5027
    @fancybear5027 4 ปีที่แล้ว +1

    I’m gutted you only have so little subscribers.

    • @DevDreamer
      @DevDreamer  4 ปีที่แล้ว

      With your amazing support, all in good time. Thanks for watching! 🙂👍

  • @sonyarianto
    @sonyarianto 3 ปีที่แล้ว

    that's magic

  • @yurashtefanko1603
    @yurashtefanko1603 4 ปีที่แล้ว +5

    I owe you like and subscription my Brother. I haven't seen such qualitative content even on channels with 300k subs.

    • @DevDreamer
      @DevDreamer  4 ปีที่แล้ว +1

      Hey Yura, thank you so much for the sub, I really appreciate the comment brother. I hope you enjoy my future videos too 🙂 👍

  • @kashmirtechtv2948
    @kashmirtechtv2948 4 ปีที่แล้ว +1

    Very cool

    • @DevDreamer
      @DevDreamer  3 ปีที่แล้ว

      Hey KASHMIR TECH TV! Thank you 🙂👍

  • @andrewmartinez9519
    @andrewmartinez9519 4 ปีที่แล้ว +1

    TYSM

    • @DevDreamer
      @DevDreamer  4 ปีที่แล้ว

      Hey Andrew and thank you for the support! 👍

  • @mrunalshinde5374
    @mrunalshinde5374 3 ปีที่แล้ว +1

    how to flip pdf pages using css property

  • @Piston1776
    @Piston1776 2 ปีที่แล้ว

    how do you rotate?

  • @mohammedmunir2017
    @mohammedmunir2017 4 ปีที่แล้ว +1

    i like and hit on subs. thanks man

    • @DevDreamer
      @DevDreamer  4 ปีที่แล้ว

      Hey Mohammed! Thank you very much for the support 😃👍

  • @laitonaluno5296
    @laitonaluno5296 3 ปีที่แล้ว +1

    Muito bom

  • @Codiboyy
    @Codiboyy 8 หลายเดือนก่อน

    ❤😊

  • @syediqbalahmed3176
    @syediqbalahmed3176 4 ปีที่แล้ว +1

    vola

    • @DevDreamer
      @DevDreamer  4 ปีที่แล้ว

      Hey Syed, thank you 👍