Mastering 2D Transforms in CSS || Episode - 25

Поділитися
Вставка
  • Опубліковано 21 лис 2024

КОМЕНТАРІ • 663

  • @CodeHelp
    @CodeHelp  Рік тому +245

    Hey Guys, Can you Please subscribe the channel and spread the series among your friends, that will indirectly boost me up to make more videos consistently.

    • @unknown_km
      @unknown_km Рік тому +3

      Of course Sir ❤️

    • @Sham_Dravid_03
      @Sham_Dravid_03 Рік тому +2

      Bilkul Bhaiya ji ❤ . Aap hamare liye itna krtee ho humm apke ke liye kuch bhi krr sakte hai

    • @kabir2190
      @kabir2190 Рік тому +6

      sure bhaiya ji link spread kar dunga har jagah bass javascript aache se cover kra dena(jaise aapne dsa kraya hai)

    • @hari_1357
      @hari_1357 Рік тому +1

      Sure bhaiya ji

    • @Shubham-il4dj
      @Shubham-il4dj Рік тому +1

      Baiya Lage hue hai
      Tension mat ligiye❤

  • @akshatsingh9011
    @akshatsingh9011 Рік тому +74

    Extra properties are:
    1. Putting X,Y or Z at the end of translate(), scale(), and skew() help us to make the transition in these directions.
    2. "transform: matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())"- a shorthand notation

  • @anshulmaurya986
    @anshulmaurya986 5 місяців тому +4

    Extra Properties are-:
    1. Matrix: a kind advanced ersion of scale,skew,rotate combinely.
    2. Perspective: usually used in 3D.

  • @anshror2583
    @anshror2583 Рік тому +4

    Purani baat but east or west babbar bhaiya is best

  • @rahulgopalka2403
    @rahulgopalka2403 Рік тому +11

    Your teaching style is amazing, It dont feel like i am forcing myself to learn but i enjoy the learning from you and always stay excited for the next lecture.

  • @rahulgopalka2403
    @rahulgopalka2403 Рік тому +2

    I can say this is the best Web Dev series on UA-cam.

  • @arkaprava_chakraborty
    @arkaprava_chakraborty Рік тому +2

    All concept clear bhaiya ..
    Extra Property: transform: matrix
    -> The matrix() method take six parameters, containing mathematic functions, which allows you to rotate, scale, move (translate), and skew elements.
    -> The parameters are as follow: matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())

  • @madhumitasarkar619
    @madhumitasarkar619 Рік тому +2

    Extra property of transform is:- transform : matrix()
    This property defines all 2D transformations. The matrix() function is specified with six values.
    matrix(a, b, c, d, tx, ty)
    a b c d
    Are s describing the linear transformation.
    tx ty
    Are s describing the translation to apply.

  • @Sham_Dravid_03
    @Sham_Dravid_03 Рік тому +2

    Bilkul Bhaiya ji ❤ . Aap hamare liye itna krtee ho humm apke ke liye kuch bhi krr sakte hai

  • @kirankadam2603
    @kirankadam2603 Рік тому +45

    Salute to ur consistency 🫡 ♥️♥️

    • @AllInOne-br9sb
      @AllInOne-br9sb Рік тому +7

      You explain better than any other youtuber like shraddha khapra or aman dhattarwal.....👏👏👏🤩

    • @richaprakash3807
      @richaprakash3807 Рік тому +2

      @@AllInOne-br9sb Yes his teaching style is really good

    • @RohitSingh-vy2ff
      @RohitSingh-vy2ff Рік тому +1

      Mere shraddha ke bare me kuch mat bolna😡😡😡

  • @vivekraychura
    @vivekraychura Рік тому +4

    Thank u bhaiya aap hmsab k liye itna kar rahe ho, apke sare videos ekdam easy to understand hai, sare concepts clear hai ALL CREDIT to you bhaiya Thank you once again

  • @abitsingh1580
    @abitsingh1580 6 днів тому +1

    Please continue this series

  • @rishabhtripathi8762
    @rishabhtripathi8762 7 місяців тому +1

    BEST WEB DEVELOPMENT SERIES ON UA-cam
    THANKYOU

  • @fachoyt9686
    @fachoyt9686 Рік тому +4

    Your clear and engaging explanations make learning CSS Transforms a breeze. Your dedication to teaching is truly commendable and has helped me tremendously on my coding journey. Thank you!

  • @pushpit5357
    @pushpit5357 Рік тому +2

    Transforms concept properly clear now.
    Thankyou sir.

  • @raj14318
    @raj14318 Рік тому +2

  • @gnguruofficial6618
    @gnguruofficial6618 9 місяців тому +2

    This lecture series gives me next level confidence ❤❤

  • @riyamehta6579
    @riyamehta6579 Рік тому +1

    Matrix() is the property which combine all 2D transforms methods into one .

  • @ranatariq8638
    @ranatariq8638 3 місяці тому

    There is no doubt in it no one can meet you so awesome impressive attractive samoth way to deliver knowledge.... What a appealing method

  • @subhamrai8918
    @subhamrai8918 Рік тому

    Bhaiiya saachi i see many youtuber other courses.. lekin apka alag hee level hai

  • @AbhiVeerThaKur
    @AbhiVeerThaKur Рік тому +2

    thank you love babar for your efforts in making these videos , i only didnt understood animation in css . rest was all awesome . thanks again. you actually know how to teach and thats a advantage you have over others, who just spill out the knowledge .

  • @SazzadurRahmanAyan
    @SazzadurRahmanAyan Рік тому

    The other function is matrix() function, which is use under css transform property. The matrix() function takes six parameters, which represent the elements of a 2D transformation matrix.
    The transformation matrix is a mathematical object that can be used to represent a variety of transformations, such as rotation, scaling, skewing, and translation. The elements of the transformation matrix are as follows:
    - a: The coefficient of the x-axis in the transformation matrix.
    - b: The coefficient of the y-axis in the transformation matrix.
    - c: The coefficient of the translation on the x-axis.
    - d: The coefficient of the translation on the y-axis.
    - e: The coefficient of the scaling on the x-axis.
    - f: The coefficient of the scaling on the y-axis.
    Thank you so much bhaia. smothly understand this css transform property. Also so much excited for next lecture (where we create a project using html and css) . lots of love from Bangladesh❤

  • @im_riyaj
    @im_riyaj Рік тому

    matrix property is another property of transform. matrix is a shorthand notation where, 'transform:matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())'

  • @kashif8886
    @kashif8886 Рік тому

    homework:
    The matrix() property is used to rotate, scale, translate, and skew elements. The matrix() function takes six parameters, which are described in the column-major order:
    a: The x-axis scaling factor.
    b: The shearing factor between the x-axis and the y-axis.
    c: The y-axis scaling factor.
    d: The shearing factor between the y-axis and the x-axis.
    e: The x-axis translation.
    f: The y-axis translation

  • @-IT-AshishKumar
    @-IT-AshishKumar Рік тому +1

    Extra properties are:
    1.matrix():a shorthand notation which contain(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY()).
    2.we can put x,y,x at the end of the translate(),scale(),skew() used for transitions in the specific direction.

  • @richaprakash3807
    @richaprakash3807 Рік тому +1

    one more property is transform: matrix(1,2,3,4,5,6); which expand the box and text and rotate it to 360 degree

  • @ramzanchaudhry3999
    @ramzanchaudhry3999 Рік тому

    Thank you for your kind words and recognition of my steadfastness and continuous intellectual growth.

  • @3viveking29
    @3viveking29 Рік тому +1

    Thanku love bhaiya❤

  • @ShariqueAkhtar
    @ShariqueAkhtar Рік тому

    matrix(a, b, c, d, e, f) matrix property
    a (scaling in the x-axis)
    b (skewing in the y-axis)
    c (skewing in the x-axis)
    d (scaling in the y-axis)
    e (translating in the x-axis)
    f (translating in the y-axis)

  • @VAIBHAVDUTTAPIET19CS179
    @VAIBHAVDUTTAPIET19CS179 Рік тому +1

    Get Well Soon bhaiya or jldi ache hokar continue karte h webdev bhaiya 😇

  • @mjm6300
    @mjm6300 Рік тому +3

    God bless you sir hats off for hard work

  • @VishalSingh-fz9xc
    @VishalSingh-fz9xc Рік тому +1

    bilkul bhaiya aapki baate sar aankho pe

  • @MaiHoonNa
    @MaiHoonNa Рік тому

    Best css content on UA-cam.

  • @puneetsharma9416
    @puneetsharma9416 Рік тому

    your teaching style is truly commendable. Hats off to you Bhaiya..

  • @ican_help_you
    @ican_help_you Рік тому +1

    again good way to learn with you anf enjoy with new new lectures
    again thank you so much

  • @NikhilSharma-qc1ez
    @NikhilSharma-qc1ez 9 місяців тому

    Thanks Bhaiya for providing such amazing content

  • @arneshbasak1910
    @arneshbasak1910 Рік тому +4

    Salute to you sir and your consistency and your developing mind. 🙏 😊

  • @rayansiingh
    @rayansiingh Рік тому +5

    HOMEWORK ANSWER HERE:
    14:30 The matrix() property in CSS is a function that defines a homogeneous 2D transformation matrix. It can be used to rotate, scale, translate, and skew elements. The matrix() function takes six parameters, which are described in the column-major order:
    a: The x-axis scaling factor.
    b: The shearing factor between the x-axis and the y-axis.
    c: The y-axis scaling factor.
    d: The shearing factor between the y-axis and the x-axis.
    e: The x-axis translation.
    f: The y-axis translation.

    • @SenseiArima11
      @SenseiArima11 Рік тому

      Bro can you please tell me what units are being used in skew and translate of matrix property. Most websites like w3schools have given example like this.
      Syntax: Matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY()
      Example: div{
      Transform: matrix(1, - 0.3, 0, 1, 150, 50)
      But here there is no unit mentioned for skew(-0.3) like degree or rad and for translate(150) also no unit mentioned like px. Please tell what units are being used or how it's working if unit are not there.

  • @ayanpal7622
    @ayanpal7622 Рік тому

    *H.W* : The extra properties are
    1) translateX()
    2) translateY()
    4)skewX()
    5)skewY()
    6)scaleX()
    7)scaleY()
    Above all the properties gives us an option to use the main property in specific direction/in specific way
    8) *matrix(1,-0.3,0,1,80,50)*
    The matrix() method is like shorthand notation for 2D transform. It combines all the 2D transform into one.
    It take six parameters.
    matrix(scaleX(),skewY(),skewX(),translateX(), translateY())
    *LECTURE 25* : ☑️
    THANK YOU BHAIYA

    • @SenseiArima11
      @SenseiArima11 Рік тому

      Hey can you please tell me what units are being used in skew and translate of matrix property. Most websites like w3schools have given example like this.
      Syntax: Matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY()
      Example: div{
      Transform: matrix(1, - 0.3, 0, 1, 150, 50)
      But here there is no unit mentioned for skew(-0.3) like degree or rad and for translate(150) also no unit mentioned like px. Please tell what units are being used

    • @ayanpal7622
      @ayanpal7622 Рік тому

      @@SenseiArima11 As per my knowledge goes there is no need to put units in skew and translate of matrix property.

  • @ashishthakur8909
    @ashishthakur8909 3 місяці тому +1

    Thank you bhaiya for your effort ❤❤

  • @zeref1248
    @zeref1248 Рік тому

    I was bored with my paid course and then decided to complete your Web Development Series❤❤❤

  • @anshulmaurya986
    @anshulmaurya986 5 місяців тому +3

    Very nice series, GO ahead!!

  • @vishnudubey5300
    @vishnudubey5300 Рік тому +1

    Please continue this constituency ❤

  • @ajeetrana994
    @ajeetrana994 Рік тому +1

    best video on transforms in css

  • @Thegothicdude-n5s
    @Thegothicdude-n5s Рік тому

    kya smajhate ho aap bhaiya 1 no , shraddha to fail hai aapke saamne !

  • @MrWhoAmI2509
    @MrWhoAmI2509 Рік тому +3

    Thank You bhaiya for this best web-dev series and salute to you for your content and consistency.❤❤

  • @vipulbhole6395
    @vipulbhole6395 Рік тому +1

    Thank you so much sir

  • @playlister7
    @playlister7 Рік тому

    No words for your Content End level !!!

  • @ajjualien2740
    @ajjualien2740 Рік тому +1

    Guys please show some support and love to this channel because he is investing his time and energy for us guys ❣️🥰

  • @DJ-rb8vc
    @DJ-rb8vc Рік тому

    best video bhaiya ,, appka smjhane ka tarika bahhut hee lajabaab hain....

  • @rushabpatange3976
    @rushabpatange3976 6 місяців тому

    Thank you for this Play list' sir aap paid course se bhi achha pada rahe hai free me... thank you for this ( full stack developer) thank you

  • @kunalgupta5073
    @kunalgupta5073 Рік тому

    The matrix() method combines all the 2D transform methods into one.
    The matrix() method take six parameters, containing mathematic functions, which allows you to rotate, scale, move (translate), and skew elements.
    matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY()) this is a shorthand notatio

  • @srkfanpage488
    @srkfanpage488 Рік тому

    bhaiya maine ye mere friends me share kar di h series 🥰🥰🥰 awesome web dev series

  • @abhishek_rajput007
    @abhishek_rajput007 Рік тому

    Best course.....pls upload 2 video each day

  • @AkashYadav-di6kd
    @AkashYadav-di6kd 10 місяців тому

    Extra Properties:
    transform: scaleX();
    transform: scaleY();
    transform: skewX();
    transform: skewY();
    transform: trasnlateX();
    transform: translateY();
    trasnsform: matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY());

  • @abduljabbarnasir8408
    @abduljabbarnasir8408 11 місяців тому

    Bht hi informative videos hoti apki love u Babbar bhai

  • @shubhamkumarjha9192
    @shubhamkumarjha9192 Рік тому

    Bhaiya Lecture 25 Complete And Love u bhaiya..

  • @yashgoel1817
    @yashgoel1817 Рік тому +1

    Like your videos and Content Babbar Bhaiya
    Thanks for providing such a wonderful content to us.

  • @nyk4589
    @nyk4589 7 місяців тому

    Best course by the best teacher

  • @akhileshchauhan9561
    @akhileshchauhan9561 2 місяці тому

    Extra properties are:
    translate()
    rotate()
    scaleX()
    scaleY()
    scale()
    skewX()
    skewY()
    skew()
    matrix()

  • @luvkingprince5469
    @luvkingprince5469 Рік тому

    thank you bhaiya to providing such content.... i have never seen such depth content on youtube..

  • @iamwaves__TMT
    @iamwaves__TMT Рік тому

    It is best series of Web dev

  • @pratikjadhav8913
    @pratikjadhav8913 Рік тому

    Hope ese hi iss course ke baad meri Web dev ki skill bhi Pro level pe "Transform" ho jaye 🙂

  • @a-24amishakumarisingh70
    @a-24amishakumarisingh70 Рік тому +1

    Thank you bhaiya for helping us to develop new skill✌️

  • @ChiragKapoor-v7f
    @ChiragKapoor-v7f 8 місяців тому

    Top notch quality content 💯. Thankyou so much for providing this quality of content free of cost.

  • @hemantguptaiiitb3039
    @hemantguptaiiitb3039 Рік тому

    consistency on another level..bhaiya please continue like this only..

  • @sukhjitsingh959
    @sukhjitsingh959 Рік тому

    The matrix() method takes six parameters, containing mathematic functions, which allow you to rotate, scale, move (translate), and skew elements.
    The parameters are as follow: matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())

  • @deepakthakur-ki2om
    @deepakthakur-ki2om Рік тому +1

    This playlist is amazing and am following since start
    Hatts off to u

  • @jibrankhan512
    @jibrankhan512 4 місяці тому

    Matrix property where all 2d transfoms properties combine 'transform:matrix(scaleX, skewY, skewX, scaleY, , translateY)' 🥰

  • @NikhilKonda-k2t
    @NikhilKonda-k2t Рік тому

    loving with the content and way of teaching by you sir

  • @BecomeMesculineWithAditi
    @BecomeMesculineWithAditi Рік тому +3

    One of the best Web Dev series with proper consistency

  • @SatnamSingh-je5nq
    @SatnamSingh-je5nq 10 місяців тому

    Thank you for provided this type of content with consistency

  • @anurag_gautam00
    @anurag_gautam00 Рік тому

    App asa padhoge to maja ayega kyu nhi obviously best in the business 🤞🙏🙌

  • @manujain8795
    @manujain8795 8 місяців тому

    Full.mja aa rha h bhaiya phli baar coding krne mja rha h❤😊

  • @hamdardkhan-i2v
    @hamdardkhan-i2v Рік тому

    Thanks sir for great efforts for such amazing course in youtube with very hard work

  • @AnshYadavD
    @AnshYadavD Рік тому

    very wonderful course and teacher also

  • @muskanchahal5092
    @muskanchahal5092 Рік тому

    great lecture bhayiya pls continue the series

  • @shouryadubey2878
    @shouryadubey2878 Рік тому

    BEST QUALITY CONTENT

  • @rtn_sings
    @rtn_sings 11 місяців тому

    and that missing property is matrix
    thank u bhaiya for your hardwork

  • @neeru.ba125-x6n
    @neeru.ba125-x6n Рік тому +1

    Very informative videos..Thank u bhaiya ......🙏🙏🌹🌹

  • @aakashsingh2374
    @aakashsingh2374 Рік тому +1

    Thanks you so much bhaiya for this wonderfull lecture

  • @GBOBSEOexpert
    @GBOBSEOexpert Рік тому

    last video of CSS. I watched whole CSS tutorials in 4 days!

  • @saiteja2168
    @saiteja2168 Рік тому

    The values represent the following functions: matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())

  • @sarrif--
    @sarrif-- Рік тому

    धन्यवाद गुरु जी❤❤

  • @Freak6318
    @Freak6318 Рік тому

    bhaiya please continue the series. This series is helping me lot to learn in easy and fun way.

  • @kritikatyagi2295
    @kritikatyagi2295 Рік тому

    Hello , thank you for the lecture.
    we have matrix() property which combines all the 2D transform method into one.
    matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY()).

  • @SanjuRohilla-x4x
    @SanjuRohilla-x4x 10 місяців тому

    Awesome lecture, thanku bhaiya

  • @chotuprajapat896
    @chotuprajapat896 Рік тому

    bahut ache sir bahut kuch samaj aa raha hai thankyou

  • @Younus_khan_1537
    @Younus_khan_1537 Рік тому

    Nicely Explained, please continue with javascript in this session

  • @RukmoddinPatel-bs2lq
    @RukmoddinPatel-bs2lq 11 місяців тому +1

    Superb series ❤

  • @MihirParida-vl9kg
    @MihirParida-vl9kg 3 місяці тому

    Very informative lectures🎉

  • @Aditya_Gupta_12200
    @Aditya_Gupta_12200 Рік тому

    Bhiya apka explanation bhut jabardast hai

  • @apurav363
    @apurav363 8 місяців тому +1

    understood bhaiya

  • @ramanyadav4332
    @ramanyadav4332 Рік тому

    Sir Continue this very good series.

  • @mddanishkhan40
    @mddanishkhan40 Рік тому

    bhaiya i am already lurn css but you teach us next level ❤

  • @masteradarshsingh4924
    @masteradarshsingh4924 Рік тому

    Incredible consistency

  • @pranavhimanshu4773
    @pranavhimanshu4773 Рік тому

    I m feeling very consistent with you sir 🙏

  • @SaurabhYadav008
    @SaurabhYadav008 Рік тому

    The matrix() Method:The matrix() method combines all the 2D transform methods into one.
    The matrix() method take six parameters, containing mathematic functions, which allows you to rotate, scale, move (translate), and skew elements.
    The parameters are as follow: matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())
    div {
    transform: matrix(1, -0.3, 0, 1, 0, 0);
    }

  • @alimansari1857
    @alimansari1857 Рік тому

    DIL KHUSH KR DIYA BHAI ❤

  • @AkshayGoswami-i3g
    @AkshayGoswami-i3g Рік тому

    Amazing lectrue bhaiya but please upload videos on time it's a humble request. Lots of love❤❤