Made in Webflow

WebDev For You - Daily Interaction #97

site profile thumbnail


Welcome to daily interaction #97. This is a fairly simple animation with a few 3D cards hovering up and down. I could see it being useful for a hero section of a website where information can be represented in an interesting way. The moving cards could grab the users attention initially. Anything can be placed in each card - an image, more text, or an illustration. If you set the opacity to transparent for each card and add a unique vector illustration I think it could work really well. The animation was created by adding a 3d wrapper and adding perspective to it. Then a card wrapper was added with 4 different blocks inside of it. I was able to get a 2x2 square via Flexbox by wrapping the children inside of the card wrapper. I then rotated the entire card wrapper. Then with interactions I moved each card different distances vertically to create the effect. To view more daily interactions and premium content visit:
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.
webdevforyoudailyinteractioninteractions3d effecthoverhover effectsmovementonload

More by WebDev For You

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