Made in Webflow

WebDev For You - Daily Interaction #129

site profile thumbnail


Welcome to Daily Interaction #129. This demo showcases a 180° project card animation on hover and click. With this effect stars scale in and out behind the image. Also on mouse move the image moves around the card. When you click on the card the card rotate 180 degrees to reveal the more information. For the stars I created a 6x8 grid of 50x50 blocks and added two div blocks inside to create the cross. Then in interactions I have them rotate, scale, and loop on hover. On hover out the crosses go back to their original size and stop rotating. For the image moving I added a mouse move over element interaction and just moved the image 20px to each side as the mouse moved around the card. On click I added a rotation to the card, so I made sure to place the card in a 3d-wrapper and added child perspective to it. Then inside of the card wrapper I added a front and back div to represent the front and back of the card.
Feeling inspired?If this Made In Webflow site sparked some inspo, why not get started on a project of your own? Clone a site, purchase a template or start building from scratch.

We miss comments too!

Right now, Made in Webflow doesn't offer all of the same functionality that Showcase did, like the ability to leave comments. But don't worry: We're working to bring comments back as soon as possible!

As always, we'd love to hear your feedback! Click the link below to take a short survey about Made in Webflow.

webdevforyoudailyinteractiondailyinteractions3dcards3d effect3dtransformsrotatescalegridimagehoverhover effectshovercard-flipcardpoint-card

More by WebDev For You

See profile
View details
WebDev For You - Daily Interaction #8