先上效果圖：
我是偷師學來的！
介紹一下背景，公司裏我所在的那個組的前端組長是個大佬，之前我做的項目因爲有其他調動交給他了，然後閒暇時間我就拉了他更改之後的代碼看看，畢竟之後總會接手代碼的嘛！然後我看頁面的時候就發現了這個效果！好奇驅使我查看了他的CSS樣式（因爲class多了一個），然後就發現了這個。
雖然以前覺得我會寫animate，也能實現一樣的效果，覺得就不用學習誰誰都在吹的transform了（我這個人總是這樣，反應總是慢幾年）
好啦好啦，扯遠了，上代碼！
首先，我的佈局是這樣：
HTML：
最外層容器box的樣式不用說了，無非就是寬高背景調調距離之類的
button的一般樣式比如寬高背景文字顏色什麼的就不說了。這裏說主要的幾個樣式：
第一個：position：relative
這個不用說，我用的是after，所以這裏需要加定位。
第二個：overflow:hidden
這個很重要。個人覺得視覺效果都靠它了。不信把效果做完了把這句去掉試試就知道了
然後我們該完成效果了。我這裏主要是用after完成的
挑幾個主要的說吧！
1. 高度200%是因爲我旋轉了，所以100%的高度會不夠，至於嚴格該多少。。。。角度給你了，各個長度給你了，自己去算吧！
2. top，left你可以想象同理，總之是要在hover之前不要被發現了。
3. 背景顏色，因爲要做的是光滑的鏡面滑動效果，所以得是白色的，要一點點透明灰更好一點，不然太油膩了^ - ^
4. 重點就是那個transform啦！結合下面的說吧！定義translate3D 3D轉換，接受3個值，分別對應X,Y,Z軸。
我這裏是X軸從-300%移動到800%，Y軸從0移動到50%，注意一下這裏的座標軸是面向我們的那一面！
也就是Y軸跟平面軸（只有X,Y軸的相反）。
5. 然後就是rotate了，我之前說過，我旋轉了的，因爲做的是斜着的效果，這裏在終態不改變，你們想試一下業可以自己試一下。
真是不得不感慨transform的強大，不過我好像以前用過？哎，反正我就是記了就忘的性子。需要不斷學習，這次偷學到這個，很開心哈哈！
好啦，今天的記錄就到這裏！拜拜！