[CSS]一起來畫立方體: CSS transform屬性

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

在畫立方體的例子中，CSS代碼中有以下兩個(gè)屬性，它們有什么作用呢？

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

MDN上有下面的描述：

CSS屬性 perspective指定了觀察者與 z=0 平面的距離，使具有三維位置變換的元素產(chǎn)生透視效果。 z>0 的三維元素比正常大，而 z<0 時(shí)則比正常>
小，大小程度由該屬性的值決定。

perspective-origin 指定了觀察者的位置，用作perspective屬性的消失點(diǎn)

在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的值（觀察點(diǎn)到z=0的平面的距離），想像一下，在z=0的位置放一個(gè)屏幕，人站在屏幕前，一個(gè)物體從屏幕前慢慢移動(dòng)到屏幕后。

IMG_09E015049534-1.jpeg

物體從Z1 > Z2 > Z3過程中，在z=0處的投影逐漸變小了?？s放的比例是多少呢？
根據(jù)數(shù)學(xué)模型，假設(shè)物體的高度為s，投影的高度為ss，那么 ss / s = d / (d - Z)，即：perspective=12, 元素在z=6時(shí)，我們最后看到的效果是元素被放大兩倍后的大小，如果元素在z=-12時(shí)，我們最后看到的是元素被縮小到1/2。

以上是perspective的理解，那么perspective-origin呢？我們一直都是假設(shè)觀察點(diǎn)在z軸上，試想如果觀察占往上或往下偏移，整個(gè)元素是不是會(huì)被扭曲呢？

再看回立方體的例子，先把perspective設(shè)成100，perspective-origin設(shè)成none，每個(gè)面都是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;
    /* 把觀察點(diǎn)設(shè)置在中心 */
    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)

我們只來研究一下正面和背面，還記得學(xué)習(xí)transform的時(shí)候，正面是沿z軸平移50px，而背面是平移50px且旋轉(zhuǎn)180度，所以
front: z = 50px
back: z = -50px

根據(jù)上面 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