WebDev For You - Daily Interaction #115

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/