jQuery-Animate3d是一款炫酷的鼠标滑过图片3D透视特效jQuery插件。通过该jQuery插件，你可以在鼠标滑过图片或其它元素时，为它添加3D透视效果。

使用方法

使用该3d透视插件，需要在页面中引入jquery和3d.js文件。

<script src="path/to/jquery.min.js"></script>
<script src="path/to/3d.js"></script>
HTML结构

你可以使用一个<div>元素作为容器，它里面的每一个元素都是一个图层。当鼠标滑过容器的时候，插件会为各个图层制作不同的3D透视效果。

<div class="image-container animate-1">
   <img src="./img/world-map.png" alt="">
   <img src="./img/layer.svg" alt="">
   <img src="./img/layer.svg" alt="">
</div>
初始化插件

在页面DOM元素加载完毕之后，可以通过animate3d()方法来初始化该jQuery插件。

$('element').animate3d();

配置参数

该3D透视特效插件的可用配置参数有：

  • Perspective：设置透视度。值必须大于0，默认值为1000。
  • Distance：各层之间的感知距离。值必须大于0，默认值为50。
  • Rotation：控制元素在鼠标滑过时的倾斜度。值在0-1之间，默认值为0.5。
  • StartX：设置默认情况下元素沿X轴的倾斜度。值在-1到1之间，默认值为0。
  • StartY：设置默认情况下元素沿Y轴的倾斜度。值在-1到1之间，默认值为0。

jQuery-Animate3d插件的github地址为：https://github.com/putnamn21/jQuery-Animate3d