某個月黑風高的夜晚，前端小白菜收到一個任務：做一張像王者榮耀登入介面一樣的圖片。
對面的豬八戒也太討厭了！ --沉迷遊戲兩小時以後，小白菜如是說到。
回到正題，讓我們先上效果圖，噹噹噹：
是不是看起來很簡單？其實，真的，很簡單！
接下來，是手摸手教學時間！
首先，我們先來一張背景圖片，再放上兩隻豬，html和css程式碼：
<style>
body {
margin: 0;
}
.container {
position: relative;
width: 1080px;
height: 600px;
background: url(back.png) 100% no-repeat;
margin: 0 auto;
}
img {
height: 300px;
position: absolute;
bottom: 0;
}
.pig1 {
right: 300px;
}
.pig2 {
left: 300px;
}
</style>
<body>
<div class="container">
<div class="pig1">
<img src="1.jpg" alt="">
</div>
<div class="pig2">
<img src="2.jpg" alt="">
</div>
</div>
</body>
複製程式碼接下來的任務，就是讓這兩隻豬隨著我們的豬蹄滑鼠輕輕點選動起來。
以圖片中心為原點，獲取滑鼠移動的座標
根據我們想要得到的圖片與滑鼠之間的互動效果，為了方便計算，以圖片的中心為原點，建立一個座標軸。 那麼以這個座標軸為基準，計算滑鼠在圖片上滑過時的座標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頁，第二章第四小節，複習一下矩陣相關小知識。
進入正題，以上面的小豬仔們為例，假設小豬仔圖片的中心點座標為（x,y）。 已知：
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+e
y = 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)')
})
複製程式碼好啦，現在一個有視差效果，可以和滑鼠互動的圖片已經做好啦～