某个月黑风高的夜晚，前端小白菜收到一个任务：做一张像王者荣耀登录界面一样的图片。
对面的猪八戒也太讨厌了！ --沉迷游戏两小时以后，小白菜如是说到。
回到正题，让我们先上效果图，当当当：
是不是看起来很简单？其实，真的，很简单！
接下来，是手摸手教学时间！
首先，我们先来一张背景图片，再放上两只猪，html和css代码：
复制代码
接下来的任务，就是让这两只猪随着我们的猪蹄鼠标轻轻点击动起来。
以图片中心为原点，获取鼠标移动的坐标
根据我们想要得到的图片与鼠标之间的交互效果，为了方便计算，以图片的中心为原点，建立一个坐标轴。 那么以这个坐标轴为基准，计算鼠标在图片上滑过时的坐标js为：
$('.container').mousemove(function () { //以图片中心为原点，鼠标的横纵坐标：mousex,mousey let mousex = event.clientX - $('.container').offset().left - $('.container').width() / 2; let mousey = event.clientY - $('.container').offset().top - $('.container').height() / 2; })复制代码 说到这里，我们还是没有让小猪动起来呀...不要着急，我们先来了解一下css中的transform属性。
W3C中是这样子介绍滴:
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
其中，我们需要应用的语法有：
| 值 | 描述 |
|---|---|
| rotateX(angle) | 定义沿着 X 轴的 3D 旋转。 |
| rotateY(angle) | 定义沿着 Y 轴的 3D 旋转。 |
| perspective(n) | 为 3D 转换元素定义透视视图。 |
| matrix(a,b,c,d,e,f) | 定义 2D 转换，使用六个值的矩阵。 |
其他有关tranform的小技巧，可以参考：
旋转！缩放！移动！倾斜！走起来！
jio do ma de！有同学举手了：老师！那个ma什么什么(matrix)的是什么呀！我不懂！
matrix，翻译为矩阵。那么首先，让我们翻开高中数学第38页，第二章第四小节，复习一下矩阵相关小知识。
transform的旋转默认是围绕着小猪仔们的中心点坐标（x,y）的，问：如何通过 transform:matrix(a,b,c,d,e,f)中六个参数我们可以对小猪仔进行2D转换？ 解： matrix，顾名思义，这个2D转换与矩阵有着不可言说的关系。 transform:matrix(a,b,c,d,e,f)中六个参数相对应的矩阵为： 相应的，这六个参数对(o,o)坐标的影响计算公式为：
经过2D转换后中心点的横纵坐标为：
x = ax+cy+ey = bx+dy+f复制代码
那么到底怎么用呢？
举个栗子，我们想让小猪水平往左挪5px，再垂直往上挪2px，设置transform:matrix(1,0,0,1,5,2)就可以了。
因此,当我们需要利用transform:matrix(a,b,c,d,e,f)对小猪进行平面位置上对偏移操作时，只要记住：
transform:matrix(a,b,c,d,水平偏移值,垂直偏移值)复制代码
当然，matrix(a,b,c,d,e,f)这个看上去==很大一坨很牛逼==的东西可不止这个小小的用法哟，rotateX()和rotateY()都可以用matrix(a,b,c,d,e,f)实现。有兴趣的小朋友们可以自己去研究一下哟～
背景图随鼠标移动倾斜。
根据我们想得到的交互效果，在之前建立的坐标轴中，rotateX() rotateY()值的正负如下：
let mousex,mousey,changex,changey; let mv = 500; $('.container').mousemove(function () { //相对图片中心为坐标轴，鼠标移动的位置 mousex = event.clientX - $('.container').offset().left - $('.container').width() / 2; mousey = event.clientY - $('.container').offset().top - $('.container').height() / 2; changex = mousey / mv; changey = mousex / mv; //根据鼠标移动的相对坐标进行背景图片翻转 $('.container').css('transform', 'perspective(400px) rotatex(' + changex + 'deg) rotateY(' + changey + 'deg)') //根据鼠标移动的对相对坐标调整两只猪对距离 $('.pig2').css('transform', 'matrix(1,0,0,1,' + mousex / -30 + ',' + mousey / -30 + ')') $('.pig1').css('transform', 'matrix(1,0,0,1,' + mousex / 20 + ',' + mousey / 20 + ')') }) $('.container').mouseout(function () { $('.container').css('transform', 'perspective(400px) rotatex(0deg) rotateY(0deg)') $('.pig2').css('transform', 'matrix(1,0,0,1,0,0)') $('.pig1').css('transform', 'matrix(1,0,0,1,0,0)') })复制代码 好啦，现在一个有视差效果，可以和鼠标交互的图片已经做好啦～