Web component to add a three-dimensional hover effect to a card.
npm install @zachleat/hypercardA web component to add a three-dimensional hover effect to any arbitrary content.
Full credit to this 3D card hover effect CodePen from Mark Mironyuk.
* Demo
* In use on the registration flow for conf.11ty.dev.
* Blog post
* Respects prefers-reduced-motion.
* Customize scale with --hypercard-scale CSS custom property.
You can install via npm (@zachleat/hypercard) or download the hypercard.js JavaScript file manually.
``shell`
npm install @zachleat/hypercard --save
Add hypercard.js to your site’s JavaScript assets.
`html`
The default value is 1.07.
`html`
- v2.0.0 changes default perspective, configurable via --hypercard-perspective`. Thanks @chriskirknielsen (via #1)!