WebDev%20For%20You%20-%20Daily%20Interaction%20%23129 - by WebDev%20For%20You
Created on Fri May 24 2019 02:38:52 GMT+0000 (Coordinated Universal Time)
This responsive website has 1030 views, 0 comments, and 23 likes.
Welcome%20to%20Daily%20Interaction%20%23129.%0A%0AThis%20demo%20showcases%20a%20180%B0%20project%20card%20animation%20on%20hover%20and%20click.%0A%0AWith%20this%20effect%20stars%20scale%20in%20and%20out%20behind%20the%20image.%20Also%20on%20mouse%20move%20the%20image%20moves%20around%20the%20card.%20When%20you%20click%20on%20the%20card%20the%20card%20rotate%20180%20degrees%20to%20reveal%20the%20more%20information.%0A%0AFor%20the%20stars%20I%20created%20a%206x8%20grid%20of%2050x50%20blocks%20and%20added%20two%20div%20blocks%20inside%20to%20create%20the%20cross.%20Then%20in%20interactions%20I%20have%20them%20rotate%2C%20scale%2C%20and%20loop%20on%20hover.%20On%20hover%20out%20the%20crosses%20go%20back%20to%20their%20original%20size%20and%20stop%20rotating.%20For%20the%20image%20moving%20I%20added%20a%20mouse%20move%20over%20element%20interaction%20and%20just%20moved%20the%20image%2020px%20to%20each%20side%20as%20the%20mouse%20moved%20around%20the%20card.%20On%20click%20I%20added%20a%20rotation%20to%20the%20card%2C%20so%20I%20made%20sure%20to%20place%20the%20card%20in%20a%203d-wrapper%20and%20added%20child%20perspective%20to%20it.%20Then%20inside%20of%20the%20card%20wrapper%20I%20added%20a%20front%20and%20back%20div%20to%20represent%20the%20front%20and%20back%20of%20the%20card.
Visit http://webdev-for-you-daily-interaction-129.webflow.io
