Crazy 3D Rotation Effect Using CSS Only

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

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

  • @lundeveloper
    @lundeveloper  5 หลายเดือนก่อน +64

    If you find the video interesting, please subscribe to the channel to continuously watch many interesting videos about programming and web design every day.

    • @Viruen.
      @Viruen. 5 หลายเดือนก่อน

      Great Video! Can you please make an in depth guide on css parallax effect explaining all the properties used. In desperate need and it would be amazing if you could do one🙏🏼.

    • @bullymaguire2335
      @bullymaguire2335 5 หลายเดือนก่อน

      Bro can u pls teach these stuff with react and some libraries

    • @GamezArturo
      @GamezArturo 5 หลายเดือนก่อน

      Master!! +1 sub 👌

    • @Inner_god
      @Inner_god 4 หลายเดือนก่อน

      You are great bro 😅

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

      Hi please what is that link you got that label or cover folder

  • @lundeveloper
    @lundeveloper  5 หลายเดือนก่อน +72

    This video will cover a lot of new properties in CSS, please don't skip this video

    • @LaughterOperation
      @LaughterOperation 5 หลายเดือนก่อน +2

      Bro u r CSS hacker.. the way u teach us is superb bro,, keep it up boss.

    • @borstenpinsel
      @borstenpinsel 5 หลายเดือนก่อน

      ​@@SoniyaM.dawoodyou clearly don't know what TS is

  • @dav1_fer
    @dav1_fer 5 หลายเดือนก่อน +167

    You are the actual CSS Master!! It's crazy this is a CSS only effect!

    • @lundeveloper
      @lundeveloper  5 หลายเดือนก่อน +10

      Thank you very much, there will be more interesting videos in the future

    • @Digitron001
      @Digitron001 3 หลายเดือนก่อน +1

      *A wild Kevin Powell appears*

  • @rusutudorrr
    @rusutudorrr 5 หลายเดือนก่อน +31

    As a backend dev, you my friend, are a total god.

  • @iulianturlica5385
    @iulianturlica5385 5 หลายเดือนก่อน +49

    This is the kind of stuff I would pay to learn in a course. You should make an online course to teach these advanced techniques. I'm pretty sure you'll have massive success with it.

  • @luiscarlosjayk
    @luiscarlosjayk 5 หลายเดือนก่อน +21

    Sharing your channel at my job's Slack, we have a group for front-end enthusiasts, hopefully more people subscribe to your content, it's just amazing, really!

    • @lundeveloper
      @lundeveloper  5 หลายเดือนก่อน +1

      Thank you for comment brother 😍 I really hope it

    • @luiscarlosjayk
      @luiscarlosjayk 5 หลายเดือนก่อน

      @@lundeveloper I think you have no idea or might not dimension the amount of people you're easing theirs lives/jobs in FE. It's beyond the number of subscribers you have, it's also about those people that watch your videos sharing this knowledge with their peers, being able to finish earlier their tasks related to some FE ticket they have in current sprint or something, and so, been able to get home earlier with the satisfaction of doing a good job helping other companies have a pretty, nice, and performant website. It's huge, really!

  • @s-qc9ns
    @s-qc9ns 5 หลายเดือนก่อน +5

    You are the Bruce Lee of CSS. This is GOD level CSS .

    • @stelatasheva4993
      @stelatasheva4993 5 หลายเดือนก่อน

      it is actually very plain and simple css, but the outcome is pretty cool

  • @ilyaerr5681
    @ilyaerr5681 3 หลายเดือนก่อน +5

    bro your css tutorials are just next level . i share your videos with everyone

  • @nustaniel
    @nustaniel 5 หลายเดือนก่อน +9

    You can add the matrix3d transform to this effect to wrap the image more around the can by bending the edges a bit, as right now it looks a bit flat.

    • @timothyharrison5105
      @timothyharrison5105 4 หลายเดือนก่อน

      Bro, could you expand on this idea?
      I'll try it on my end to see how it goes.

    • @RayBellis
      @RayBellis 2 หลายเดือนก่อน

      A single transform can only apply a single affine transformation to an individual rectangular element, so you can't manipulate a single IMG element to do that. To achieve a realistic wrapping effect you'd need to chop the can up into multiple vertical slices, and then have each slice rotated in the Z axis, each with its own offset into the wrapping image.

  • @cillipill
    @cillipill 5 หลายเดือนก่อน +5

    Bro☠ you really mastered CSS, well done! Keep it up!

  • @Danachew
    @Danachew 5 หลายเดือนก่อน +23

    One thing I love about your tutorials is the humor you add to them 😆

    • @lundeveloper
      @lundeveloper  5 หลายเดือนก่อน +3

      😅😅😅 Thank you brother 😅😅

  • @Navneet1206g
    @Navneet1206g 4 หลายเดือนก่อน

    I watch your video first time. And दीवाना हो गया(I obsessed).

  • @Shieda_Mehmetcan
    @Shieda_Mehmetcan 5 หลายเดือนก่อน +1

    You are really good at CSS, great work! I learned so many new CSS properties, thanks a lot for making these kind of videos and teaching us something new on every video!

    • @lundeveloper
      @lundeveloper  5 หลายเดือนก่อน +1

      Thank you for your valuable comments

  • @EthioPodcaster
    @EthioPodcaster 5 หลายเดือนก่อน +4

    This video, bro it should have greater than 10 million view. Believe me or not I laughed at my self because I don't know any thing about the topic. Photoshop in vscode is sick. Anyway you are css god.

    • @lundeveloper
      @lundeveloper  5 หลายเดือนก่อน +3

      Thank you, I hope the content I create will be accessible to those who find it useful, because I always do my best for each video ❤️

  • @mZTYn
    @mZTYn 5 หลายเดือนก่อน +3

    I'm a beginner but still found this video really interesting...

  • @ZivKoHai
    @ZivKoHai 2 หลายเดือนก่อน

    the amount of knowledge i got from this channel is huge , thank you lun dev for sharing with us

  • @HansMagnusNedreberg
    @HansMagnusNedreberg 3 หลายเดือนก่อน +1

    Nice take!
    The condensation on the can image gives it away a bit too much though. Use a clean can with all details on the label image.

  • @jag9271
    @jag9271 5 หลายเดือนก่อน +5

    You need to make a course on Udemy or TH-cam because your skills are undeniably incredible

  • @lounes03b99
    @lounes03b99 2 หลายเดือนก่อน

    You can't believe 😱 if I knew you earlier I would now be a professional in CSS.

  • @migionie
    @migionie 3 หลายเดือนก่อน

    your tutorials, skills and knowledge are high-end! New follower earned and this account will be shared with my friends, thank you ones again!

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

    Bro is the Elon Musk of CSS. You're on a whole different planet!

  • @KunalSawant-ew8oq
    @KunalSawant-ew8oq 5 หลายเดือนก่อน

    Man I've been watching your videos form like past 15 days it really helped me out ....Nice work man...

    • @lundeveloper
      @lundeveloper  5 หลายเดือนก่อน

      😍😍😍😍 Thank you so much

  • @nikred9985
    @nikred9985 5 หลายเดือนก่อน +1

    Next css king on youtube

    • @lundeveloper
      @lundeveloper  5 หลายเดือนก่อน

      It Comming 🔥🔥🔥

  • @promisenwaeke5210
    @promisenwaeke5210 5 หลายเดือนก่อน

    this is the unarguably best channel on TH-cam.

    • @lundeveloper
      @lundeveloper  5 หลายเดือนก่อน

      Thank you so much brother

  • @plastikbeau3695
    @plastikbeau3695 5 หลายเดือนก่อน +3

    This effect looks really nice, but a way to improve it even further, would be to deform the label at the vertical edges of the can. It could be done with canvas API or SVG filter, but could you do it with CSS alone? 🤨

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

    suprised i am now seeing this channel .
    love your content!

  • @sorayaartiel4749
    @sorayaartiel4749 3 หลายเดือนก่อน +1

    You are a genius.. 🤯

  • @KnightOfChess
    @KnightOfChess 4 หลายเดือนก่อน

    That tutorial was awesome, unbelievably beautiful.

  • @s.mausaja3081
    @s.mausaja3081 5 หลายเดือนก่อน

    Damn this is some next level css, keep up the great work. Btw what is the theme on your vs code?

    • @lundeveloper
      @lundeveloper  5 หลายเดือนก่อน +1

      Thank you, this is my own custom theme, you will find instructions in the description of this video

  • @weelovesports
    @weelovesports 5 หลายเดือนก่อน

    F! man im starting to love CSS now, even though i don't have talent on it. i'am starting to learn i love your videos and i thought you are mr. beast because of how you deliver and your tone lol keep it up

  • @PicSta
    @PicSta 5 หลายเดือนก่อน

    Top nodge LD. Fantastic tutorial with the newest CSS features. Well explained and looking great too.

    • @lundeveloper
      @lundeveloper  5 หลายเดือนก่อน

      Thank brother

  • @VArlaud
    @VArlaud 5 หลายเดือนก่อน +1

    Absolute masterclass, thanks a lot

    • @lundeveloper
      @lundeveloper  5 หลายเดือนก่อน +1

      Thank for watching my content brother 😍

  • @chris-adams-tas
    @chris-adams-tas 2 หลายเดือนก่อน

    Jaw-dropping demo Lun Dev, many thanks.
    Subscribed.

  • @Londonesify
    @Londonesify 5 หลายเดือนก่อน

    I love your videos so much!! I hope you keep posting :)

    • @lundeveloper
      @lundeveloper  5 หลายเดือนก่อน

      Of course, there will be many interesting videos later

  • @awaluddintogar1175
    @awaluddintogar1175 5 หลายเดือนก่อน

    Ong broo.. youre so talented
    Awesome content with nice tutorial, keep it up bro

  • @danielfelipegarciavillaned5542
    @danielfelipegarciavillaned5542 5 หลายเดือนก่อน +1

    LA VERDAD ES QUE NO ENTIENDO BIEN EL INGLES PERO EL VIDEO ESTÁ BRUTAL Y ES MUY IMPRESIONANTE LO QUE HACE CON EL CSS , SALUDOS , NUEVO SUB

  • @hassanad94
    @hassanad94 4 หลายเดือนก่อน

    React, Svelte, Solid.... These are just things for programers enjoyment.... But your videos these design has real value! To be able create page like this 100 times more important then React server components.... Or Svelte Runes... Thank You for your videos!! :D

  • @RonnelJaySoriano
    @RonnelJaySoriano 5 หลายเดือนก่อน

    This is was so cool!! new subscriber here Master!

    • @lundeveloper
      @lundeveloper  5 หลายเดือนก่อน

      Thank you brother 😍

  • @bermarvillarazo8507
    @bermarvillarazo8507 5 หลายเดือนก่อน

    Nice video! The dramatic background music-I love it.

    • @lundeveloper
      @lundeveloper  5 หลายเดือนก่อน +1

      Thank you 😍😍

  • @inspiringstories1460
    @inspiringstories1460 5 หลายเดือนก่อน +1

    Please start teaching a CSS course on TH-cam as I only watched a few of your videos and it's great
    and please also tell us from where we get those images that you used in the videos

  • @sihemsisi5561
    @sihemsisi5561 18 วันที่ผ่านมา

    Just Amazing bravo❤

  • @ezazmajumder
    @ezazmajumder 5 หลายเดือนก่อน

    Nice bro you are helping me to believe that I can do a nice design using CSS....

  • @nguyenhongson5749
    @nguyenhongson5749 5 หลายเดือนก่อน

    tuyệt với quá xem a từ lúc mới làm video bên tiktok, chúc a ngày càng phát triển 😘😘

    • @lundeveloper
      @lundeveloper  5 หลายเดือนก่อน

      Wow, cảm ơn em rất nhiều nhé ^^

  • @nekomew
    @nekomew 5 หลายเดือนก่อน

    Wow this effect is so awesome. I really need to learn about multiple backgrounds, seems like can do a lot of things with it.

    • @lundeveloper
      @lundeveloper  5 หลายเดือนก่อน

      Yes, hopefully it can spark your creativity

  • @lucioluczka8752
    @lucioluczka8752 5 วันที่ผ่านมา

    you're crazy! hahaha this is amazing!

  • @NattapongPUN
    @NattapongPUN 5 หลายเดือนก่อน +2

    Love your work❤

  • @pułkownikkaczodziobyzpodlasia
    @pułkownikkaczodziobyzpodlasia 3 หลายเดือนก่อน

    I love the video! Could you please make the sound effects more quiet next time? It’s too loud compared to the voice. It could just be me though. Very useful info regardless

  • @misterhs5511
    @misterhs5511 5 หลายเดือนก่อน

    Always a pleasure, i keep my css up to date and i'm entertain at the same time, perfection👌

  • @Codewithedyn
    @Codewithedyn 5 หลายเดือนก่อน

    You blew my mind! Sharp!❤

  • @مصطفىحيدر-و4ت
    @مصطفىحيدر-و4ت 5 หลายเดือนก่อน

    What is the editor that you are working with?vs code and what ?
    Very great video u are master ❤❤❤

  • @derekobidu610
    @derekobidu610 2 หลายเดือนก่อน

    broooo u r d css masterr

  • @Paladoriom
    @Paladoriom 4 หลายเดือนก่อน +1

    wow! your are the person i get inspiration from.

  • @gazorbpazorbian
    @gazorbpazorbian 5 หลายเดือนก่อน

    GREAT VIDEO! love this! learned a lot!

    • @lundeveloper
      @lundeveloper  5 หลายเดือนก่อน +1

      Thank you so much brother 😍😍

  • @QuintessentialDio
    @QuintessentialDio 5 หลายเดือนก่อน

    Amazing tutorial Lun

    • @lundeveloper
      @lundeveloper  5 หลายเดือนก่อน

      Thank brother ☺️☺️

  • @AerinPatel
    @AerinPatel 5 หลายเดือนก่อน

    thank you mr beast for help me develop my css skills

  • @megamind452
    @megamind452 5 หลายเดือนก่อน

    You just got a new subscriber. Nice vid 👍

    • @lundeveloper
      @lundeveloper  5 หลายเดือนก่อน

      Thank you so much bro 😍😍

  • @NiceChange
    @NiceChange 5 หลายเดือนก่อน

    Great work. Thank you. The CSS is definitely a bonus to the coder. ❤❤❤

  • @adventurewithme18
    @adventurewithme18 5 หลายเดือนก่อน

    Great man. You're my inspiration.

    • @lundeveloper
      @lundeveloper  5 หลายเดือนก่อน

      Thank you for watvhing my content, Hopefully the content I share will one day be known by many people who need it

  • @TheAbimaelST
    @TheAbimaelST 4 หลายเดือนก่อน

    So sad I couldn't like more than one, you deserve thousands.

  • @duke605
    @duke605 3 หลายเดือนก่อน

    Could also remove the condensation from the can and add it as another background so the condensation spins with the can further adding to the perception that the can is rotating

  • @hadidwiardiansyah9436
    @hadidwiardiansyah9436 4 หลายเดือนก่อน

    Wohh absolutely crazy😱

  • @naveenverma4650
    @naveenverma4650 4 หลายเดือนก่อน

    Really you are a genius❤

  • @aryanbhargav1755
    @aryanbhargav1755 5 หลายเดือนก่อน

    I learned so many new things thanks a lot brother

  • @Athertanveer6
    @Athertanveer6 3 หลายเดือนก่อน

    You are alien bruh mind blowing 👏

  • @nirupamsharma7277
    @nirupamsharma7277 5 หลายเดือนก่อน

    bro i really waits for your new videos. please never stop posting.

  • @shushankranjan715
    @shushankranjan715 5 หลายเดือนก่อน +1

    Bro its incredible

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

    that mask image property is a sorcery!

  • @TrevisWamuthenya
    @TrevisWamuthenya 3 หลายเดือนก่อน

    Bro your on another level

  • @heidardotdev
    @heidardotdev 5 หลายเดือนก่อน +1

    hello my smart friend thanks for stunning video ❤

  • @Saad-z4i
    @Saad-z4i 5 หลายเดือนก่อน

    you are super good and exelent in css

  • @nikuu0
    @nikuu0 3 หลายเดือนก่อน +1

    bro is genius

  • @alimehmoodj999
    @alimehmoodj999 5 หลายเดือนก่อน

    your coding videos is no joke

  • @anirudhbanerji6233
    @anirudhbanerji6233 4 หลายเดือนก่อน +83

    why does he sounds like mr beast

    • @gamingdude7959
      @gamingdude7959 4 หลายเดือนก่อน +1

      Same lmao, I was wondering why he sound like mr beet too

    • @laughingstar3945
      @laughingstar3945 3 หลายเดือนก่อน +18

      Ai voice

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

      Uss

    • @NasiruMubarak-pp9sc
      @NasiruMubarak-pp9sc 11 วันที่ผ่านมา

      ​@laughingstar3945 and its so fxcking annoying

  • @coding-cosmos
    @coding-cosmos 5 หลายเดือนก่อน

    Love the video ❤
    I have a question :
    I see you using position:relative and absolute along with right top etc to design the entire layout why you don't use grid or flexbox for high level layouts ? Is it a good practice as per modern CSS?

  • @rast7781
    @rast7781 12 วันที่ผ่านมา

    You are CSS Gods

  • @zeke2269
    @zeke2269 5 หลายเดือนก่อน

    Absolute genius! ❤

  • @irfansaeedkhan7242
    @irfansaeedkhan7242 4 หลายเดือนก่อน

    you are genius man, i want to learn from you, do you know threejs could you make video on 3D as well

  • @loveto-travel
    @loveto-travel 5 หลายเดือนก่อน

    Awesome tutorial man

  • @luuthaiquangkhai
    @luuthaiquangkhai 2 หลายเดือนก่อน

    Great video! I want to ask what if I want to create a shadow in the drock beneath the soda can, and the shadow move in size when the bottle goes higher up. Adding bottom shadow would make this much more realistic I think.

  • @titosk3
    @titosk3 5 หลายเดือนก่อน

    Awesome! Where are you getting these images from?

    • @lundeveloper
      @lundeveloper  5 หลายเดือนก่อน

      Pinterest brother

  • @TheMetalMag
    @TheMetalMag 5 หลายเดือนก่อน

    interesting, css never cease to amaze and update

    • @lundeveloper
      @lundeveloper  5 หลายเดือนก่อน

      That's right, it's impossible to predict what CSS will be able to do later

  • @c_donnachie
    @c_donnachie 5 หลายเดือนก่อน

    Great!!, ask, how do you control or adapt the elements with absolute position when making it responsive?

  • @emmaeli-m2u
    @emmaeli-m2u 5 หลายเดือนก่อน

    thanks for great work 👏

  • @murtazaali9346
    @murtazaali9346 5 หลายเดือนก่อน

    Bro I've a suggestion for you, create a full course on css from basic to advanced and I'm pretty sure you'll have massive success.
    You upload premium videos for free, Wish you huge success 🎉❤

  • @Learn_basic_to_advance
    @Learn_basic_to_advance 2 หลายเดือนก่อน

    Thanks you sir this video and I am very happy 😀😀

  • @timirbarangayen625
    @timirbarangayen625 5 หลายเดือนก่อน

    The ultimate boss😂❤

  • @mygicarskrsk4465
    @mygicarskrsk4465 2 หลายเดือนก่อน

    wow.. great video

  • @action2731
    @action2731 5 หลายเดือนก่อน

    Thank you bro!
    this is so Awesome 🔥🔥💯💯😎😎🙏

    • @lundeveloper
      @lundeveloper  5 หลายเดือนก่อน

      Thank you so much ❤️❤️❤️

  • @klaurcschwackerberg1880
    @klaurcschwackerberg1880 2 หลายเดือนก่อน

    Your exaggerating speaking voice is hilarious so good. extreme high extreme low . and all in between. lol great job. that's how to roll.

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

    Awesome! Thanks

  • @divyeshthakur2100
    @divyeshthakur2100 4 หลายเดือนก่อน

    Tnx , Very help full video ❤

  • @challso4147
    @challso4147 2 หลายเดือนก่อน

    Bravo Bro 👏👏👏

  • @verawat
    @verawat 3 หลายเดือนก่อน

    Awesome man !!!

  • @MrTweaksGaming
    @MrTweaksGaming 4 หลายเดือนก่อน

    Ohh man, what are you doing ? its crazy .!

  • @jmr1920
    @jmr1920 5 หลายเดือนก่อน

    another amazing tutorial

    • @lundeveloper
      @lundeveloper  5 หลายเดือนก่อน

      Thank ❤❤❤❤❤

    • @jmr1920
      @jmr1920 5 หลายเดือนก่อน

      @@lundeveloper no, thank you for another great tutorial. please dpmt stop uploading more tutorials like this!

  • @fahimul.islam.fahad.
    @fahimul.islam.fahad. 5 หลายเดือนก่อน

    It's awesome ❤️💥

    • @lundeveloper
      @lundeveloper  5 หลายเดือนก่อน

      Thank you bro

  • @pumpkintree6611
    @pumpkintree6611 5 หลายเดือนก่อน

    Like..man ,if you and your friend CSS can do this, what the hell do you do with JavaScript..make a universe?? 😂 RESPECT!

    • @lundeveloper
      @lundeveloper  5 หลายเดือนก่อน +1

      😅😅😅😅😅 Thank you for watch my content brother 😍😍

  • @redswordz9131
    @redswordz9131 5 หลายเดือนก่อน

    awesome as always!

    • @lundeveloper
      @lundeveloper  5 หลายเดือนก่อน

      Thank you bro ^^

  • @karansj22
    @karansj22 5 หลายเดือนก่อน

    Please make a complete tutorial on beginner to advanced Css ..

  • @edsHTML
    @edsHTML 5 หลายเดือนก่อน +1

    cool effect bro 😎👍