当前位置:JS特效 » 其他 » jQuery鼠标滑过图片3D透视特效插件
 jQuery鼠标滑过图片3D透视特效插件
如果您觉得内容不错,请分享:

插件介绍

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

浏览器兼容性

浏览器兼容性
时间:2021-07-24 阅读:43
简要教程

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

使用方法

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


                  
                
HTML结构

你可以使用一个

元素作为容器,它里面的每一个元素都是一个图层。当鼠标滑过容器的时候,插件会为各个图层制作不同的3D透视效果。

初始化插件

在页面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

Top