Card3d.js

Installation ?

NPM

                
npm i card3d
                
            

CDN

                
https://unpkg.com/card3d@2.6.5/dist/card3d.js
                
            

Import

                
const Card3d = require("card3d");
import Card3d from "card3d";
import "card3d";
                
            

Without attributes in JS

                
//all attributes can ba placed as configuration (data-card3d-delta="0.8" -> delta: 0.8)
const card = new Card3d(
    document.querySelector('.card'), 
    { glare: 0.7, glareOpacity: 0.7 }
);

//methods
card.updateConfig(newConfig);
card.stop();
card.start();
                
            

Simple example

HTML

                
    

Simple example with glare

HTML

                
    

Simple example with other perspective and delta

HTML

                
    

Simple example reversed

HTML

                
    

Simple example with no reset

HTML

                
    

Simple example with full page listening

HTML

                
    

Simple example with scale

HTML

                
    

Simple example with start X and Y

HTML

                
    

Simple example with axis

HTML

                
    

Use device orientation on mobile (only android)

HTML

                
    

How to stop

HTML