[CSS]一起来画立方体: CSS perspective属性

[CSS]一起来画立方体: CSS transform属性

• transform
• translate
• rotate
• perspective
• perspective-origin

在画立方体的例子中，CSS代码中有以下两个属性，它们有什么作用呢？

 .pers {
    perspective: 350px;
  }
  .cube {
    perspective-origin: 150% 150%;
  }

MDN上有下面的描述：

CSS属性 perspective指定了观察者与 z=0 平面的距离，使具有三维位置变换的元素产生透视效果。 z>0 的三维元素比正常大，而 z<0 时则比正常>
小，大小程度由该属性的值决定。

perspective-origin 指定了观察者的位置，用作perspective属性的消失点

在W3C，perspective属性则包含在css-transform文档中：

Perspective can be used to add a feeling of depth to a scene by making elements higher on the Z axis (closer to the viewer) appear larger, and those further away to appear smaller. The scaling is proportional to d/(d − Z) where d, the value of perspective, is the distance from the drawing plane to the assumed position of the viewer’s eye.

Normally the assumed position of the viewer’s eye is centered on a drawing. This position can be moved if desired by setting perspective-origin.

perspective_origin.png (图源:w3.org)

perspective_origin.png (图源:w3.org)

在上面的图中，d就是perspective的值（观察点到z=0的平面的距离），想像一下，在z=0的位置放一个屏幕，人站在屏幕前，一个物体从屏幕前慢慢移动到屏幕后。

IMG_09E015049534-1.jpeg

物体从Z1 > Z2 > Z3过程中，在z=0处的投影逐渐变小了。缩放的比例是多少呢？
根据数学模型，假设物体的高度为s，投影的高度为ss，那么 ss / s = d / (d - Z)，即：perspective=12, 元素在z=6时，我们最后看到的效果是元素被放大两倍后的大小，如果元素在z=-12时，我们最后看到的是元素被缩小到1/2。

以上是perspective的理解，那么perspective-origin呢？我们一直都是假设观察点在z轴上，试想如果观察占往上或往下偏移，整个元素是不是会被扭曲呢？

再看回立方体的例子，先把perspective设成100，perspective-origin设成none，每个面都是100*100的正方形。

<div class="container">
  <div class="cube pers">
    <div class="face front">1</div>
    <div class="face back">2</div>
    <div class="face right">3</div>
    <div class="face left">4</div>
    <div class="face top">5</div>
    <div class="face bottom">6</div>
  </div>
</div>
<style>
  .pers {
    perspective: 100px;
  }
  .container {
    width: 200px;
    height: 200px;
    margin: 100px 0 0 100px;
    border: none;
  }
  .cube {
    width: 100%;
    height: 100%;
    backface-visibility: visible;
    /* 把观察点设置在中心 */
    perspective-origin: none;
    transform-style: preserve-3d;
  }
  .face {
    display: block;
    position: absolute;
    width: 100px;
    height: 100px;
    border: none;
    line-height: 100px;
    font-family: sans-serif;
    font-size: 60px;
    color: pink;
    background-color: thistle;
    text-align: center;
  }
  /* Define each face based on direction */
  .front {
    background: rgba(0, 0, 0, 0.3);
    transform: translateZ(50px);
  }
  .back {
    background: rgba(0, 255, 0, 1);
    color: black;
    transform: rotateY(180deg) translateZ(50px);
  }
  .right {
    background: rgba(196, 0, 0, 0.7);
    transform: rotateY(90deg) translateZ(50px);
  }
  .left {
    background: rgba(0, 0, 196, 0.7);
    transform: rotateY(-90deg) translateZ(50px);
  }
  .top {
    background: rgba(196, 196, 0, 0.7);
    transform: rotateX(90deg) translateZ(50px);
  }
  .bottom {
    background: rgba(196, 0, 196, 0.7);
    transform: rotateX(-90deg) translateZ(50px);
  }
</style>

效果:

正面(200*200)

背面(66.67*66.67)

我们只来研究一下正面和背面，还记得学习transform的时候，正面是沿z轴平移50px，而背面是平移50px且旋转180度，所以
front: z = 50px
back: z = -50px

根据上面 ss / s = d / (d - Z)，来看看：
front：ss / 100 = 100 / (100 - 50) px -> ss = 200px
back: ss / 100 = 100 / (100 - (-50)) px -> ss = 66.67px

参考文档：
[W3C] https://drafts.csswg.org/css-transforms-2/#perspective-property
[MDN] https://developer.mozilla.org/zh-CN/docs/Web/CSS/perspective
[MDN] https://developer.mozilla.org/zh-CN/docs/Web/CSS/perspective-origin