css的透视效果perspective

阿超

发布于 2024-08-23 19:33:20

690

发布于 2024-08-23 19:33:20

文章被收录于专栏：快乐阿超

有两件事我最憎恶：没有信仰的博才多学和充满信仰的愚昧无知。——爱默生

我们知道css中我们的transform可以调整z轴，这说明css是有3d能力的

但是我们通常看一个3d的物体，是近的地方大，远的地方小甚至被遮挡，要实现这样的透视效果其实只需要一个css属性即可

https://developer.mozilla.org/zh-CN/docs/Web/CSS/perspective

就比如这个正方体：

代码

<div id="example-element" class="transition-all" style="perspective: 800px;" data-immersive-translate-walked="0feca0b2-b725-4a5c-91aa-4690c29a453c">
      <div class="face front" data-immersive-translate-walked="0feca0b2-b725-4a5c-91aa-4690c29a453c">1</div>
      <div class="face back" data-immersive-translate-walked="0feca0b2-b725-4a5c-91aa-4690c29a453c">2</div>
      <div class="face right" data-immersive-translate-walked="0feca0b2-b725-4a5c-91aa-4690c29a453c">3</div>
      <div class="face left" data-immersive-translate-walked="0feca0b2-b725-4a5c-91aa-4690c29a453c">4</div>
      <div class="face top" data-immersive-translate-walked="0feca0b2-b725-4a5c-91aa-4690c29a453c">5</div>
      <div class="face bottom" data-immersive-translate-walked="0feca0b2-b725-4a5c-91aa-4690c29a453c">6</div>
    </div>

效果

如果我们设置perspective: 800px;

代码

<div id="example-element" class="transition-all" style="perspective: 800px;" data-immersive-translate-walked="b1d212a5-696e-42f8-b9b3-e677dce0025c">
      <div class="face front" data-immersive-translate-walked="b1d212a5-696e-42f8-b9b3-e677dce0025c">1</div>
      <div class="face back" data-immersive-translate-walked="b1d212a5-696e-42f8-b9b3-e677dce0025c">2</div>
      <div class="face right" data-immersive-translate-walked="b1d212a5-696e-42f8-b9b3-e677dce0025c">3</div>
      <div class="face left" data-immersive-translate-walked="b1d212a5-696e-42f8-b9b3-e677dce0025c">4</div>
      <div class="face top" data-immersive-translate-walked="b1d212a5-696e-42f8-b9b3-e677dce0025c">5</div>
      <div class="face bottom" data-immersive-translate-walked="b1d212a5-696e-42f8-b9b3-e677dce0025c">6</div>
    </div>

效果