用React实现跟随鼠标的3D透视效果

2024-11-13

效果展示

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

需要用到的知识

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

代码部分

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

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

评论