- 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文檔中：
Perspectivecan 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.
在上面的圖中，d就是perspective的值（觀察點到z=0的平面的距離），想像一下，在z=0的位置放一個屏幕，人站在屏幕前，一個物體從屏幕前慢慢移動到屏幕后。
物體從Z1 > Z2 > Z3過程中，在z=0處的投影逐漸變小了?？s放的比例是多少呢？
根據數學模型，假設物體的高度為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>
效果:
我們只來研究一下正面和背面，還記得學習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
