[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處的投影逐漸變小了寂嘉∽嗨玻縮放的比例是多少呢枫绅？
根據(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