WebDev For You - Daily Interaction #118
![site profile thumbnail](https://uploads-ssl.webflow.com/5cd48014e016235be1e4d27c/5cd49144153b750b3543ece2_webdev-for-you-cloneable-cover-118.png)
Welcome to Daily Interaction #118.
This demo showcases an 3D info card animation on hover.
In this demo when you hover over an image a panel rotates in horizontally to reveal content. The effect was achieved by adding a div block with a child perspective applied to it. Then another div block was added inside of this 3D wrapper. Within interactions this div block was rotated from 90 degrees to 0 degrees on the x-axis. Because the wrapper has a child perspective it creates a 3D effect for the panel as it comes in. I also had content reveal from top to bottom as the panel is coming in.
Inspired by: https://codepen.io/littlesnippets/pen/OMvXYJ
To view more daily interactions and premium content visit:
https://www.webdevforyou.com/