版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/github_36091081/article/details/84109256
在实际开发中，应用一些微交互、视差效果，可以让页面更加生动。如下面的例子：
这个例子中运行了3D transform 的相关知识。具体细节如下分析。
1、切图
将psd稿上的这个区域切成如下图的3块图片，方便在页面上进行叠加、
2、布局
给三张图片设置不一样的translateZ（translateZ的值越小，元素大小越小，因为元素远去，我们眼睛看到的就会变小），这样三层图片就形成了远近的层次效果，否则都在一个平面上，就没有了视差效果，如下：
（缺少了层次效果，就没有了视差效果）
html布局代码：
<div class="banner-row move-row" style="transform-style: preserve-3d;">
<div class="layer right-image" style="transform: translateZ(50px);">
<img src="images/index/br4_img1.png" />
</div>
<div class="layer right-image" style="transform: translateZ(100px);">
<img src="images/index/br4_img2.png" />
</div>
<div class="layer right-image" style="transform: translateZ(150px);">
<img src="images/index/br4_img3.png" />
</div>
</div>
3、JS
用JS实现跟鼠标的互动效果，图片向着鼠标移动的相反方向转动。可以想象一下，Z轴上从远到近，有三张背景透明的图（从屏幕正方看，三张图重叠，看上去就是一张图）然后，让他们在 X轴 或者 Y轴转动，就形成了视差效果。
主要js如下：
var w = $(window).width(), h = $(window).height();
function move(t) {
var moveX = (t.pageX / w - .5) * (-25) || 10, moveY = -(t.pageY / h - .5) * (-20) || 10;
var n = "rotateX(" + moveY + "deg) rotateY(" + moveX + "deg) ";
return n;
}
$(".left-header").on("mousemove", function(e) {
var n = move(e);
$(".move-row").css("transform", n);
});
$(".move-row").on("mousemove", function(e) {
var n = move(e);
$(this).css("transform", n);
});
参考: