CSS3-3D-Transform

CSS3D 变形,主要的两个样式就是

1
2
transform-style: preserve-3d;
perspective: 800px;

元素设置了此样式后,里面的元素就能按照3D的模式去渲染。
为了更好的理解。
可以看这个DEMO

网上有一个教程是关于如何用css来实现视差滚动,不过原地址打不开了,但是DEMO还可以看。找到一篇中文翻译

当前页面渲染的层级超过3个的时、或者层级使用了透明度。滚动的 时候可能会有卡顿。

配合之前的平滑滚动

可以发现,当前视口的视差层级两个的时候,效果如丝般顺滑DEMO地址

试了几次发现 如果当前页面的可视区域有 Foreground Layer 渲染时,就会感觉滚轮有点卡。