CSS3D 变形,主要的两个样式就是
1 | transform-style: preserve-3d; |
元素设置了此样式后,里面的元素就能按照3D的模式去渲染。
为了更好的理解。
可以看这个DEMO
网上有一个教程是关于如何用css来实现视差滚动,不过原地址打不开了,但是DEMO还可以看。找到一篇中文翻译
当前页面渲染的层级超过3个的时、或者层级使用了透明度。滚动的 时候可能会有卡顿。
配合之前的平滑滚动
可以发现,当前视口的视差层级两个的时候,效果如丝般顺滑DEMO地址
试了几次发现 如果当前页面的可视区域有 Foreground Layer 渲染时,就会感觉滚轮有点卡。