Daily Interaction #31 | 180° Flip Effect on Hover | WebDev For You | Made in Webflow

[@steveworrell]

Best explanation of this interaction I could find. Thank you.

[@amandarusso9141]

This is the only video that has helped me with Webflow. All the others explain things way to fast and skip so many details. Thank you so much!!

[@PortlandEventFilms]

So use to hearing this is John with Adobe Muse

[@garethellison01]

Thanks from not so sunny Scotland! Awesome vid and very much appreciated! 👍🏼

[@Saskyia]

Many thanks.

[@durham2482]

Thank you so much man, very detailed description of the entire process. Implementing this into my business website now!

[@alexanderraspberry8599]

Best card flip tutorial out there! Thank you!

[@missperera7934]

This is so great thank you for going step by step and explaining the reason behind each action!

[@hollercountry]

Great tutorial but I have an issue on Safari browsers as the Backface Visibility does not work correctly. Apparently Safari does not support it properly. Do you have any solutions for this?? Many thanks

[@ughnah]

really helpful 💗 thanks for this

[@texasrvp1]

You are awesome! Thank you

[@ziggerwebdesign1704]

Nice one, thanks. Subscribed.

[@Tepangaa]

I've learned A LOT from your tutorials! Thansk a lot for sharing your knowledge. Many many many thanks

[@writtenbyhumans]

You are a great teacher. Very detailed. Thank you for discussing the why's and how's. This is helpful for a deeper understanding of the tools in webflow, and making other things work as well. :D

[@muldvarpe]

Thanks - great tutorial. Exactly what I have been looking for.

[@AzharBhagas]

Thankyou for the tutorial

[@TEO_LOL1]

Thank you so much, you are a very good teacher!

[@candice1]

Really helpful, thanks a lot !

[@kdppixie]

Nice tutorial, but maybe somehow you could update your video with new webflow version? Seems they changed animation part and it's difficult to follow your video from that part :((

[@dimitrisqq]

We miss you!

[@corinal73]

Super helpful, thanks!

[@TheRosigirl]

the best tutorial for flipping cards! thank you :)

[@Jezza3110]

Just what I’m looking for - many thanks and keep up the great work 🙂

[@ericmcquesten]

@WebDev For You - First off thank you for taking the time to share this video. I tried implementing on a site I am building for a client and it works great except on iOS devices. It works perfectly on Windows and Android devices. Do you have any thoughts on why it could be glitchy on iOS?

[@SandraJunker]

Have you got a solution on that problem? Same problem here ..

[@TiaraLGrier]

Same here

[@lomela]

Same!

[@Elizabeth-bn9vh]

Thank you so much!!! I’m a brand new to website creation but with your channel I look like a pro 😃 thanks

[@sambroadey3234]

So good

[@andrewkigen]

Thanks so much for this!

[@djordjek3916]

Very good and simple explanation. Exactly what I looked for. Thank you very much! 🙂 It deserved subscription to your channel. But I have one question though. I am completely new to Webflow, I watched most of their tutorial videos, but would it be easier to follow this process in order to create that card rotation effect? 1. Create a section. 2. Create a container inside the section and give it a class. 3. Create a grid within the container with 3 columns and 3 rows with the same class in order to expand cards vertically and align them to center vertically and horizontally. 4. Create div blocks inside the three columns for both front and back part of the cards so you can add content properly inside them and give them classes. 5. Do the rotation part for back part and display text as none and then do the animation. I think the similar process can be used when you create slider with more cards in it.

[@JustMary5]

This is awesome! Thanks ☺️

[@samoklaidofficielqdlrecord7674]

Merci !!

[@pix0311]

Hi, does this still work? I cloned it in Webflow and your version seems to not work. Can we please get an updated version if possible and also make these a clickable link! Thanks

[@SoundBurstVibes]

This is awesome man thanks!

[@JoshuaBabarinde]

Thank you for this @WebDev For You - Is it possible to do an additional; effect such that after that flip happens in hover when the card is clicked it shows a pop-up video on each card? I would appreciate it. Thank you!

[@mawrrs]

Is it i possible to nest buttons inside the card-front & have them trigger the 180 rotation on click?

[@danilo_z]

Thanks for this awesome tutorial again John! :)

[@stefanpfadt4353]

Cool! Any chance to activate this flip animation when a switch is toggled (for example from monthly to yearly for a pricing table/cards)?

[@justSchmitti]

Great video! Easy to follow. You helped me a lot!

[@alialbawardy4797]

Hello I love you video, but I am encountering a big problem, the animation doesn’t work on Ipad and I phone, I have spent hours trying to figure it out but no luck, is there an easy fix😓

[@derekentrekin8672]

John, I’m trying to adjust the card back to the hidden state after the rotation of 180 has been applied. However, it’s not working in that I can still see the card. Any idea why? The new version of Webflow doesn’t have the same look as what this tutorial is on, but it seems like it should be working the same way

[@WebDevForYou]

Hi Derek, can you send the read-only link, I can take a look.

[@derekentrekin8672]

@@WebDevForYou Sure thing. I created a new page called "Flip Card" to try and test your tutorial. preview.webflow.com/preview/city-of-thorp?preview=bd83c2659cdb8f5415c9ed236fea63c6&pageId=5ea9c8961bc20654322760d6&mode=preview Thanks

[@WebDevForYou]

@@derekentrekin8672 Hi Derek, is it happening on the live site. In preview it looks ok. I do notice that for the over in animation you have it set to "mouse out," and for hover out it sent to "mouse in." Not sure if this was intended.

[@derekentrekin8672]

@@WebDevForYou Thanks for taking a look! So, I have the card flipping, but you can see the text is reversed like in your tutorial. For some reason, the opposite side of the card is showing. So, the text is reversed and for the life of me I can't figure out why. I must have watched this thing 10 times trying to figure out what I did wrong.

[@nnnnneeko]

@@derekentrekin8672 Hey man, if you do -180 instead of 180 that should do the trick it worked for me and was facing same issue - great tutorial btw @WebDev For You

[@randywr1]

Why does your webflow interface look so different?

[@adrixta1]

Hi John! This worked great, it's my firt time messing with webflow, and this was super easy to follow. Just one question. How do I edit the back of the duplicate cards once I have copy pasted them?

[@jcster32]

Try it at minute 18:53!

[@moodcatching]

Hey there :) I'm trying to build something very similiar for the company I'm working in. Basically, I have product cards that get image, title and another text element from a CMS list and I want to achieve that on hover, the card is turning and revealing some more data regarding the product that is also pulled from the same CMS list. Is that possible and if so, do I have to go about it the same way as shown by you in the video? :)

[@HACHmusic]

Hey man! Thank you so so much for your videos! They are so valuable and educational. I know I'm a little late to the party, almost 1 year late. Just learning webflow, so I'm still a noob. Would you be kind to make a theocratical video about position? I still struggle understanding how positions affect each other and how do they behave. That would be awesome to have under your tutorials bank. Thanks alot and god bless.