先上效果图：
我是偷师学来的！
介绍一下背景，公司里我所在的那个组的前端组长是个大佬，之前我做的项目因为有其他调动交给他了，然后闲暇时间我就拉了他更改之后的代码看看，毕竟之后总会接手代码的嘛！然后我看页面的时候就发现了这个效果！好奇驱使我查看了他的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的强大，不过我好像以前用过？哎，反正我就是记了就忘的性子。需要不断学习，这次偷学到这个，很开心哈哈！
好啦，今天的记录就到这里！拜拜！