纯js和CSS3炫酷3D信用卡特效

这是一款使用纯Js和css3制作的炫酷3D信用卡特效。该3D信用卡特效中，信用卡会根据鼠标的位置进行相应的3D旋转，并带有光影特效，效果非常的酷。

使用方法

在页面中引入样式文件style.css和js文件main.js

<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="path/to/main.js" type="text/javascript"></script>
                

HTML结构

该3D信用卡特效的整体布局HTML代码如下：

<div class="container">
  <div class="cover atvImg">
    <div class="atvImg-layer" data-img="img/visa-bg.jpg"></div>
    <div class="atvImg-layer" data-img="img/visa.png"></div>
  </div>

  <div class="cover atvImg">
    <div class="atvImg-layer" data-img="img/visa-bg-2.jpg"></div>
    <div class="atvImg-layer" data-img="img/visa.png"></div>
  </div>

  <div class="cover atvImg">
    <div class="atvImg-layer" data-img="img/visa-bg-3.jpg"></div>
    <div class="atvImg-layer" data-img="img/visa.png"></div>
  </div>

  <div class="cover atvImg">
    <div class="atvImg-layer" data-img="img/visa-bg-4.jpg"></div>
    <div class="atvImg-layer" data-img="img/visa.png"></div>
  </div>
</div>
                

下面是该3D信用卡的一些截图效果：