效果展示

在下面的图形上移动鼠标即可看到效果

需要用到的知识

  • CSS perspective，参考MDN
  • CSS transform-style，同样参考MDN

代码部分

其实核心的逻辑和React关联性不大，只是我正好用React来做的，直接参考https://jsfiddle.net/yunyuyuan123/ukqstdw6/95/，主要关注这几个部分：

  • 使用requestAnimationFrame来保证动画过度的流畅性。
  • 通过translateZ来控制Z轴的高度，从而实现层次感。
  • 使用CSS新属性will-change来提升性能。