Vue.config.devtools=!0,Vue.component("card",{template:'\n    <div class="card-wrap"\n      @mousemove="handleMouseMove"\n      @mouseenter="handleMouseEnter"\n      @mouseleave="handleMouseLeave"\n      ref="card">\n      <div class="card"\n        :style="cardStyle">\n        <div class="card-bg" :style="[cardBgTransform, cardBgImage]"></div>\n        <div class="card-info">\n          <slot name="header"></slot>\n          <slot name="content"></slot>\n        </div>\n      </div>\n    </div>',mounted(){this.width=this.$refs.card.offsetWidth,this.height=this.$refs.card.offsetHeight},props:["dataImage"],data:()=>({width:0,height:0,mouseX:0,mouseY:0,mouseLeaveDelay:null}),computed:{mousePX(){return this.mouseX/this.width},mousePY(){return this.mouseY/this.height},cardStyle(){return{transform:`rotateY(${30*this.mousePX}deg) rotateX(${-30*this.mousePY}deg)`}},cardBgTransform(){return{transform:`translateX(${-40*this.mousePX}px) translateY(${-40*this.mousePY}px)`}},cardBgImage(){return{backgroundImage:`url(${this.dataImage})`}}},methods:{handleMouseMove(e){this.mouseX=e.pageX-this.$refs.card.offsetLeft-this.width/2,this.mouseY=e.pageY-this.$refs.card.offsetTop-this.height/2},handleMouseEnter(){clearTimeout(this.mouseLeaveDelay)},handleMouseLeave(){this.mouseLeaveDelay=setTimeout((()=>{this.mouseX=0,this.mouseY=0}),1e3)}}});var app=new Vue({el:"#lib-cards"});