3D Flip Card Effect On Hover Using Only HTML & CSS

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

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

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

    I spent 4 hours making this in Javascript, arigato for showing me the right way Sensei

  • @sanjogsilwal9477
    @sanjogsilwal9477 6 ปีที่แล้ว +60

    Can you make a video on how to combine css and html in detail for making a full website?

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

    Good job, but better with sound off

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

    Good morning and good week I finished your video, thank you
    greetings I liked it

  • @ttempaa
    @ttempaa 5 ปีที่แล้ว +9

    HTML, CSS & JS one love ❤

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

    Your channel is very good🇧🇷🇧🇷🇧🇷

  • @NOTHING-en2ue
    @NOTHING-en2ue ปีที่แล้ว +1

    great video ❤

  • @ragibshahariar6852
    @ragibshahariar6852 4 ปีที่แล้ว +10

    Alhamdulillah. That was very helpful for me, Thank you.

  • @ГерманСтоянов-г7ъ
    @ГерманСтоянов-г7ъ 6 ปีที่แล้ว +6

    Good job! I find your tutorials very useful!

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

    Merci pour tout les information

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

    the best one so far, thanks

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

    amazing I am learning a lot with your codes.... Thanks

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

    You deserve 100k+ subs, your videos really useful!

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

      Bro
      For that 100k people should know atleast basics of css

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

    This is exactly what I want to be able to do THANK YOU! However, being completely new to Wordpress I am building pages via Elementor - can I use this code somewhere to be able to do this on the images on the page?
    🤔🤨🙄

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

    can i use this for my youtube channel

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

    Really outstanding ❣

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

    Is it possible to implement this effect on a website created in wordpress?

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

    Teu canal é uma maravilha!!

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

    Hey DarkCode! What did you use to create your intro and outro?

  • @Madman-xk2si
    @Madman-xk2si 4 ปีที่แล้ว +1

    nice vid.

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

    Hi, can you post link of fontawesome, this link which you linked in HTML ?

  • @dattebayobla-bla7945
    @dattebayobla-bla7945 5 ปีที่แล้ว

    Why after the page is updated, the class .back is transformed from 0 to 180 deg if I haven"t yet cursor over the picture?

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

    Thank you for sharing this video, it surely helped me solve problems concerning that effect...

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

    Nice video bro

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

    If i want to do flip three and four image then what i do plz answer

  • @milandupalo9679
    @milandupalo9679 6 ปีที่แล้ว

    Can I put button instead of icon?

  • @لاالهالااللهمحمدرسولالله-ث1ل

    Woo easy

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

    Good Job man keep it well

  • @lambo-ca
    @lambo-ca 5 ปีที่แล้ว

    Great animation.

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

    good ....

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

    which software are you using for coding???

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

    Perfect 👌 card))

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

    very cool effect, but when I refresh the page the animation starts itself without me hovering the card. How can I prevent that?

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

      Same problem here ! anyone found a solution to that problem ? I have been trying to solve this for days...

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

    7:06 - At this moment I didn’t quite understand what this phrase ".card: hover > front" means - is this the Flip effect?
    2:57 - Here is also an incomprehensible moment - as we immediately registered the property "position: absolute;" where we have a parent element with the property "position: relative;" ? For which we are positioning the block with the class "middle"?

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

      you can save this channel fo css things: th-cam.com/video/PoaQaR3DXTk/w-d-xo.html

  • @mrketchupp-ketchupp
    @mrketchupp-ketchupp 5 ปีที่แล้ว

    Esta muy bueno...!

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

    Will this work on css grid? The grid container can be rotated with their content?

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

    can i add additional cards on the same page? because when i try the two cards overlap each other

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

      @Kurt Harvey I am having the same issue. Did you find a solution?

  • @Kids_Darshika_TV
    @Kids_Darshika_TV 6 ปีที่แล้ว +2

    your video are very helpful

  • @charith-q8m
    @charith-q8m ปีที่แล้ว +1

    Pro tip - don't use songs like this.. use a calm music and don't turn the volume all the way up

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

    very good tutorial for new creation.
    I like this channel very much.

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

    thanks bro for all your vids they are amazing

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

    thanks a lot good job

  • @hieunotes
    @hieunotes 6 ปีที่แล้ว +2

    Good, thanks

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

    can anyone tell me why when I turn off the
    .middle{position:absolute}property
    the image file stops respecting the set width and height of 100% of the div parent and is now referencing the body

  • @felipe0liveira274
    @felipe0liveira274 5 ปีที่แล้ว +1

    Fantastic

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

    work on mobile ?

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

    Si lay hafdek a khouya ❤️

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

    thanks bruv :D

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

    Great guy be blessed

  • @rap01011
    @rap01011 5 ปีที่แล้ว +1

    what track is playing at the beginning?

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

    Awesome

  • @joaopaulo-pr3xb
    @joaopaulo-pr3xb 4 ปีที่แล้ว

    thank u,ure awessome dude

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

    that's awesome

  • @ТигранОвакимян-д1х
    @ТигранОвакимян-д1х 4 ปีที่แล้ว +2

    просто лучший! бро, где ты этому научился? может книги посоветуешь?

  • @guylemay1471
    @guylemay1471 5 ปีที่แล้ว +1

    Simple idea nicely done - thank you!

  • @cactuscot
    @cactuscot 5 ปีที่แล้ว +1

    Dude thank you for sharing your Skills with us! Very useful. 👍🏻

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

    Top demais !!!

  • @ভবেরশহর-ড১ষ
    @ভবেরশহর-ড১ষ 2 ปีที่แล้ว

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

    Fast and interesting tutorial

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

    i love u men u r the best

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

    Awesome work bro😍

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

    Will donate you for sure bro

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

    Great vid

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

    Watching good

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

    how do we do this with js?

  • @SnirSigawi
    @SnirSigawi 5 ปีที่แล้ว +1

    Thanks a lot! It's super useful.
    I got one problem after I rotated my picture, I had to rearrange it position and it fucked up everything.
    Can you please help me with it?

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

    Fantastic thank you so much

  • @AmarGaikwad_gaikwadamar1991
    @AmarGaikwad_gaikwadamar1991 6 ปีที่แล้ว +1

    cool

  • @ShivamGupta-nz7dy
    @ShivamGupta-nz7dy 6 ปีที่แล้ว +3

    You got really cool videos, thanks to youtube that I found you. In fact, thanks to God.

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

    I really like it so much , thank you for all your video ❤❤

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

    Is it a '*' in the first line of style.css or is it a star shape ??

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

      Its a star which denotes for all content

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

      @@shivayagoel thank you
      Can you tell me that if its a ' * ' or ' ★ '

    • @shivayagoel
      @shivayagoel 5 ปีที่แล้ว +1

      *

    • @karthiksr992
      @karthiksr992 5 ปีที่แล้ว +1

      @@shivayagoel thank you 💓

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

    thx men! great tut like always

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

    I liked it this is awesome!

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

    Got a Pen of this somewhere?

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

    I have tried it, but when using the atom the result is the same but when run on chrome it is not the same and the logo does not exist, please help,

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

      read about vendor prefixes

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

    Thanks for tutorial. It will be better if you upload the source code into github, and make a link in the description.

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

    Great! Best regards

  • @techshab9060
    @techshab9060 6 ปีที่แล้ว +1

    My best chennal is DARKCODE

  • @alidemircomtr
    @alidemircomtr 6 ปีที่แล้ว +1

    Good Job!

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

    Thanks Sir

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

    Hey can we collaborate?

  • @zettabyte8282
    @zettabyte8282 5 ปีที่แล้ว +1

    What is the song on your intro

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

      Dark paradise

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

    Awesome bro!

  • @JEsterCW
    @JEsterCW 6 ปีที่แล้ว

    You're amazing.

  • @jefersonmedeiros7677
    @jefersonmedeiros7677 6 ปีที่แล้ว +1

    Great, man! Like...

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

    Github??

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

    Hey it's a great tutorial, I just got one doubt. What if I have to use multiple cards in a row? I can't provide the class name card middle to all the cards because then they would all coincide with each other. Can anyone please help me with inserting multiple cards on the page?

  • @info-Travels
    @info-Travels 6 ปีที่แล้ว +2

    can you make an admin panel complete in php......plz do this if you can !......

  • @chastityishikawa7833
    @chastityishikawa7833 6 ปีที่แล้ว +1

    Is it possible to code it on a notepad??

  • @itmegltchyy3620
    @itmegltchyy3620 6 ปีที่แล้ว +2

    How do i bring "index.html preview"...?

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

    Hello can you share your code??

  • @ErkanOkman
    @ErkanOkman 6 ปีที่แล้ว +1

    👍👏

  • @zzz-go6yq
    @zzz-go6yq 6 ปีที่แล้ว +1

    What program is this

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

    Amazing work sir.I tried this but the content in back is reversed😔.Some one help me please!

  • @nut049
    @nut049 5 ปีที่แล้ว +1

    Очень круто! Very cool!

  •  5 ปีที่แล้ว

    How name edito

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

    My image is not rotating please solve🙏🏻

  • @AbhishekKumar-mq1tt
    @AbhishekKumar-mq1tt 6 ปีที่แล้ว +1

    Thank u for this awesome

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

      visit this for new design:
      th-cam.com/video/l1dVTClm9uc/w-d-xo.html

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

    I cannot understand classes you use. There is no middle or card class in html and still it is working.

    • @DarkCodeOnline
      @DarkCodeOnline  5 ปีที่แล้ว +1

      Bro the classes name in html its random we use it for select the element in css or js for example

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

      @@DarkCodeOnline I did not know that you can create class with space in name and to reference use only second part :) still thank you for your movies are really helpful see ya :)

    • @svenrichey5803
      @svenrichey5803 5 ปีที่แล้ว +1

      @@element4225 With using space you can combine several classes, in this case .card and .middle. This gives you a better flexibilty in design.

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

      @@element4225 I also did't understand,why he use first and second part of class separately.

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

      We can give more than just one class to an element :)

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

    If
    Margin:0;
    Padding:0;
    What is the need of taking them..