WebDev For You - Daily Interaction #115
Description
Welcome to Daily Interaction #115.
This demo showcases a 3D product card animation on hover.
On hover the card rotates vertically on the y-axis and the snowboard rotates to the right. This allows for more information to be displayed on a different side of the card, and by having the snowboard rotate it creates a nice visual distinction between the different sides of the card.
The effect was accomplished by creating a wrapper with a child perspective applied to it. Then I created another card wrapper with two div blocks inside of it to represent the front and right side of the card. I then rotated the right side 90 degrees and made sure the back-face visibility was set to hidden. In interactions I applied a rotation and movement to the entire card to create the 3D rotation.
Inspired by: https://codepen.io/pgalor/pen/WKoXqM
To view more daily interactions and premium content visit:
https://www.webdevforyou.com/
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.