在上一篇博客CSS3 3D相冊一文中可以看到欠窒，實(shí)現(xiàn)該3D效果的關(guān)鍵在于：
- 利用transform改變各個(gè)元素位置
- 利用transition增加動態(tài)效果
- 利用perspective屬性改變視角
transform和transition兩個(gè)屬性都比較好理解助币，只是perspective視角問題在上一篇博客中沒有詳細(xì)介紹，所以今天就來介紹下perspective以及perspective-origin屬性院溺。
1 perspective
perspective指的是：Z平面距離用戶之間的距離，瀏覽器通過該距離來計(jì)算用戶的視角大小磅轻，從而制造出近大遠(yuǎn)小的3D效果珍逸。當(dāng)元素的z-index大于0或者元素在Z軸正向移動后，元素的大小都會超過實(shí)際大辛铩谆膳；同理，當(dāng)元素的z-index小于0或者在Z軸反向移動后撮躁，元素大小都會小于實(shí)際大小漱病。
接下來我們來看一個(gè)實(shí)際的例子：
<html>
<head>
<style>
.pers250 {
perspective: 250px;
}
/* Define the container div, the cube div, and a generic face */
.container {
width: 100px;
height: 100px;
margin: 50px auto;
border: none;
}
.cube {
width: 100%;
height: 100%;
backface-visibility: visible;
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: white;
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>
</head>
<body>
<div class="container">
<div class="cube pers250">
<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>
</body>
</html>
可以看到：
-
front元素因?yàn)槌?code>Z軸正方向移動，所以其大小會比設(shè)定的大小(100px)更大perspective2.png
-
back元素朝著Z軸反方向移動把曼，所以其大小會比設(shè)定的大小更小perspective3.png
- 其他側(cè)面元素則出現(xiàn)近大遠(yuǎn)小效果
接下來我們再來改變perspective的大小杨帽，看下在不同perspective下會出現(xiàn)哪些變化：
我們首先添加兩個(gè)新的元素:pers350和pers500
<style>
.pers350 {
perspective: 350px;
}
.pers500 {
perspective: 500px;
}
</style>
<html>
<div class="container">
<div class="cube pers250">
<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>
<div class="container">
<div class="cube pers350">
<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>
<div class="container">
<div class="cube pers500">
<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>
</html>
可以看到，隨著perspective的值增大嗤军，頁面元素變得更凶⒂：這個(gè)其實(shí)不難理解，相當(dāng)于用戶眼睛離屏幕更遠(yuǎn)了叙赚，元素當(dāng)然也就顯得更小了老客。
2 perspective-origin
搞清楚了perspective，接下來我們來看下perspective-origin屬性：
The perspective-origin CSS property determines the position at which the viewer is looking. It is used as the vanishing point by the perspective property.
perspective-origin定義了觀察者的視角相對于顯示元素的位置震叮。通常我們用該屬性來定義視線滅點(diǎn)沿量，也即視線消失的位置。上面的例子中冤荆，我們并未指定perspective-origin屬性朴则，因而使用默認(rèn)的perspective-origin：即元素中心位置，所以每一個(gè)元素看起來都是對稱的，仿佛我們正對它們乌妒。
利用perspective-origin屬性汹想，我們可以模擬從不同位置來觀察物體的效果：
<div style="margin: 50px;">
<div class="container" style="margin:50px; display:inline-block; ">
<div class="cube pers250" style="perspective-origin:left top;">
<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>
<div class="container" style=" margin:50px; display:inline-block;">
<div class="cube pers250" style="perspective-origin:right bottom;">
<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>
</div>
可以看到，設(shè)置perspective-origin屬性后撤蚊，兩個(gè)元素呈現(xiàn)出完全不同的效果：
- 左側(cè)元素的
perspective-origin值為perspective-origin:left top;古掏，也即其視線滅點(diǎn)為左上角，所以出來的效果類似于從該元素的右下角進(jìn)行觀察 - 右側(cè)元素的
perspective-origin值為right bottom侦啸，也即視線滅點(diǎn)為右下角槽唾，所以出來的效果類似于從元素的左上角進(jìn)行觀察
這些perspective-origin的含義也就清晰明了了。
perspective-origin的取值總共有以下幾種：
- x-axis
- left
- center
- right
- length
- %
- y-axis
- top
- center
- bottom
- length
- %
