根据鼠标位置变化的3D卡片视觉差互动特效

face-cursor.js是一款可以根据鼠标位置变化的jQuery和CSS3 3D卡片视觉差特效。该特效以卡片的形式对元素进行布局，在页面中移动鼠标时，插件就会根据鼠标的位置对卡片应用transform: rotate3d()进行3D转换。

安装

可以通过npm来安装该视觉差特效插件。

npm install face-cursor --save                  
                

使用方法

使用该视觉差特效需要在页面中引入jquery和face-cursor.js文件。

<script src="jquery.min.js"></script>
<script src="face-cursor.js"></script>                  
                

HTML结构

使用一个<div>元素作为容器，里面使用放置需要的内容，可以是图片，也可以是文字。

<div class="card">
    <h2>Content</h2>
    <img src="img/27.jpg"/>
</div>
<div class="card">
    <h2>More content</h2>
    <p>......</p>
</div>           
                

初始化插件

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

$(".card").faceCursor({
  // 配置参数
});                 
                

配置参数

face-cursor.js插件可用的配置参数有：

• avertCursor：元素是面向鼠标，还是朝向鼠标。
• perspective：CSS 3D transform的透视度。
• cacheElementData：是否缓存元素的宽度、高度和偏移值，而不是每一帧都去计算。如果元素是来回移动的，或者你希望在浏览器尺寸改变时效果持续不变，设置该参数为false。

销毁插件

可以通过下面的方法来销毁指定的插件实例。

$elements.data("plugin_faceCursor").destroy();                  
                

或通过下面的方法来销毁所有的实例。

$("*").filter(function() {
    return $(this).data("plugin_faceCursor") !== undefined
}).each(function() {
    $(this).data("plugin_faceCursor").destroy()
});                  
                

face-cursor.js插件的github地址为：https://github.com/matthias-vogt/face-cursor.js