How To Make 3D Flip Effect In HTML and CSS | Create Flip Card In HTML CSS Step by Step

แชร์
ฝัง
  • เผยแพร่เมื่อ 28 พ.ย. 2024
  • Learn How To Make 3D Flip Effect In HTML and CSS | Create Flip Card In HTML CSS Step by Step tutorials
    ❤️ SUBSCRIBE: goo.gl/tTFmPb
    ❤️ Complete website Using HTML and CSS
    ✔️ 8 Complete website step by step
    ✔️ Source Code Download
    ✔️ 76 Lectures, 12 Hours Video
    ✔️ Course Completion certificate
    👉 easytutorialsp...
    In this video you will learn to create a 3D flip card using HTML and CSS. We will create a team members section with 3 team members profile. By default in each columns only user image and name will be visible, one we will take cursor on any image, it will flip (rotate by 180 degree) then we can see the users other information like designation and social media icons.
    We will create this entire design using HTML and CSS step by step, so keep watching this video till the end.
    -------------------------------------
    ◼️ Like this video
    ◼️ Subscribe channel
    ◼️ Share video link on social media
    -------------------------------------
    Recommended Videos:
    Make contact page using HTML and CSS
    ► • How To Make A Contact ...
    Make full website using HTML and CSS
    ► • How To Make Complete W...
    Make login and registration form using HTML and CSs
    ► • How To Make Login & Re...
    Create travel site using HTML, CSS and bootstrap
    ► • How To Make A Website ...
    Make eCommerce website using HTML, CSS & Bootstrap
    ► • How To Make ECommerce ...
    -------------------------------------
    ◼️ Source code link is shared in community post for all my coding videos exclusively for channel members (only channel members can see)
    Join Channel Membership:
    ► / @greatstackdev
    -------------------------------------
    Like - Follow & Subscribe us:
    ◼️ TH-cam: goo.gl/tTFmPb
    ◼️ Facebook: goo.gl/qv7tEQ
    ◼️ Twitter: / itsavinashkr

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

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

    I just found your channel earlier today and I would like to thank you for all these great tutorials. I just followed this one step by step and will be watching more in days to come. you made this very easy!

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

    love u man you are adding value to developer community. God Bless You!

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

    Hello sir can you pls make a video on how to make a Taxi booking App like Uber and Ola.
    I would will be waiting to hear from you soon.

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

    hey man great tut no doubt just ek issue hora hai like i made the same just used circles instead of squares and when they are rotating they are flipping but towards the right side i mean the whole image moves a little right so i hope u can help me out there

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

    very good thanks!

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

    creative!!!

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

    Which Application Your using For this

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

    thanks man, am subscribed to your channel and its according to the name really easy, you make things easy

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

    Brother great job go ahead
    Thanks

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

    Very beautiful, you are creative❤

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

    nice tutorial

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

    Awesome 👍 bro 💪

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

    Awesome video

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

    Thanks very helpful video

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

    Nice sir...🤩

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

    Nice one broo

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

    As always it is an amazing tutorial!
    Keep going!

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

    Hey do you know how to create and edit a music list that shows a list of songs or beats for a beat selling store

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

    awesome

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

    I always wondering why and how may I be your student !?

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

    Hello Sir my Images are not showing in my web page. what should I do

  • @SaurabhKumar-qb1xp
    @SaurabhKumar-qb1xp 4 ปีที่แล้ว

    what is the shortcut to write class with div like u are writing by giving .row

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

      @@afrokitmedia or else hit enter
      It works for me!

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

    .card-front{
    background-image: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),
    url(Bi.jpg);
    This is the code for the image. I have put same as you have put. Than also the image is not showing.

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

      Same as this - tutorial worked fine until I went to add the image. Did you find a way around this?

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

      Put the image in the same folder where your code belongs

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

      @@samsunil2704 yeah!!

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

      @@samsunil2704 was about to say the same!

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

      put quotation marks around bi.jpg. if still not working make sure that the image is in the same folder as the file

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

    create an company employee attendance form where the employee can sign in and sign out after work

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

    Do you work for payment?
    Freelance.

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

    👍👍👍👏

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

    can somebody help me? my cards isnt side by side, why is that? it go straight down.

  • @SaurabhKumar-qb1xp
    @SaurabhKumar-qb1xp 4 ปีที่แล้ว

    from where do I get such icons of social media

  • @107_yashsingh8
    @107_yashsingh8 3 ปีที่แล้ว

    bro transition effect apply hi nhi ho rha hai

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

    How can we make it responsive

  • @EmilCoronel
    @EmilCoronel ปีที่แล้ว

    how can i get the full code?

    • @GreatStackDev
      @GreatStackDev  ปีที่แล้ว

      please read in the description

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

    Wrong coding am unable to get results
    Its size of pixels are differ

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

    Nice tutorial, thanks! I've discovered some new properties like perspective and transform-style. The only what confused me and made me laugh were the images. Sorry, but these people don't look like CEOs and managers. The ladies rather look like porn actresses and that old man is kinda folk musician. I hope you will take my words as a joke. Just try to select images of people according to the content properly. Good luck to you!

  • @fayad_ousmand
    @fayad_ousmand ปีที่แล้ว

    Image is not working

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

    Too different from thumbnails

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

    Plz provide source code!!!

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

    Hello how are you
    I need your help I have contacted you on my Facebook I hope to receive a response from you