CSS perspective 屬性

admin發表於2019-04-20
CSS

版本發展到CSS3，功能得到了極大的提高，原本難以實現的功能，現在已經變得相對輕鬆。

比如美觀的3D圖片輪播效果，在以前很可能要藉助於flash或者結合JavaScript通過複雜的程式碼實現。

當前通過CSS3就可以較為輕鬆的實現，並且效能更為優良，前提是你首先要掌握這些知識。

本文將結合程式碼和圖示的方式介紹一下3D變化中關鍵屬性perspective的用法。

爭取做到本文是當前線上關於perspective屬性的最為優秀的教程。

關於3D變換的更多內容可以參閱CSS3 2D/3D轉換一章節。

一.3D變換座標系：

既然是3D變換，自然要在三維空間中進行，二維空間座標系僅有x軸與y軸。

三為空間則多出了一個z軸，簡單圖示如下：

a:3:{s:3:\"pic\";s:43:\"portal/201904/20/165833efjscm9qvfv758p9.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

圖示簡單說明如下：

（1）.預設狀態下，X軸是水平的，左側為正。

（2）.預設狀態下，y軸是垂直的，向下為正。

（3）.預設狀態下，z軸垂直於x軸和y軸形成的平面，正對著我們的方向為正。

二.3D效果的產生：

現實生活中，我們所處的環境毫無疑問是3D立體空間。

然而要展示我們3D效果的顯示器卻是二維的，所以做到視覺上的3D效果是關鍵所在。

首先通過三個簡單的圖片感受一下3D變換效果。

a:3:{s:3:\"pic\";s:43:\"portal/201904/20/170032kpapomst6li80044.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

圖示簡單說明如下：

（1）.虛線是X軸，紅色元素圍繞x軸旋轉。

（2）.離我們越近的部分也大，反之越小，在視覺上符合3D效果。

a:3:{s:3:\"pic\";s:43:\"portal/201904/20/170048f97uogyzjozqzyit.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

圖示簡單說明如下：

（1）.虛線是y軸，紅色元素圍繞y軸旋轉。

（2）.同樣，離我們越近的部分也大，反之越小，在視覺上符合3D效果。

a:3:{s:3:\"pic\";s:43:\"portal/201904/20/170101afyziilfdd8fm58f.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

圖示簡單說明如下：

（1）.黃色點是垂直的z軸，所以我們只能看到一個點。

（2）.紅色的元素圍繞z軸旋轉，元素在視覺上不會產生變形。

很簡單，通過改變元素響應地方的尺寸就產生了視覺效果，距離我們近的就大一點，遠的就小一點。

不過這一切都是依據透視原理，下面專門做一下介紹。

三.透視：

很多畫作具有3D效果，我們說它採用三點透視畫法，在電腦上繪圖也是同樣的道理。

根據滅點數量的不同，可以將透視劃分為如下三種：

（1）.只有一個滅點，那就是單點透視。

（2）.具有兩個滅點，那就是兩點透視。

（3）.具有三個滅點，那就是三點透視。

所謂滅點就是立體圖形延伸後相交的地方，下面是來自百度百科一個關於透視的示意圖：

a:3:{s:3:\"pic\";s:43:\"portal/201904/20/170119xprdaoqjjfjagpfq.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

利用透視原理實現了3D效果，生活現實中視覺效果上也是如此。

假設有一個長廊，距離我們越遠的地方看起來越小，如果足夠的長，盡頭會在視覺上相交。

簡單圖示如下：

a:3:{s:3:\"pic\";s:43:\"portal/201904/20/170131c2booaterxeygoar.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

四.perspective屬性用法：

前面所做的一切都是為了介紹perspective屬性做知識鋪墊。

回到文章前半部分使用圖片演示的3D效果，如果儘可能延伸的話，最終也會也會相交。

圖示如下：

a:3:{s:3:\"pic\";s:43:\"portal/201904/20/170244r5zh6w5756qcmjuc.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

perspective屬性用於規定觀察點距離元素的距離，規則如下：

（1）.觀察點距離元素越近，元素變形越大，滅點距離越近。

（2）.觀察點距離元素越遠，元素變形越小，滅點距離也就越遠。

比如設定perspective屬性值為1200px，那麼就是觀察點距離元素的距離是1200px。

需要注意的是，此值是給解析器看的，生成具有立體效果圖形，而不是說讓你距離螢幕1200x去觀察。

視點的位置可以結合 perspective-origin屬性進行調整，具體參閱CSS perspective-origin一章節。

perspective屬性的使用還有如下兩點需要注意：

（1）.此屬性在舞臺元素上設定，對進行3D變換的子元素生效。

（2）.如果子元素非3D變換元素，那麼沒有任何效果。

（3）.與perspective()作用相同，具體區別可以參閱CSS perspective(n)一章節。

五.程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>   
<html>   
<head>   
<meta charset=" utf-8">   
<meta name="author" content="http://www.softwhy.com/" />   
<title>螞蟻部落</title>   
<style> 
#box{ 
  position:relative; 
  height:150px; 
  width:150px; 
  margin-left:450px; 
  margin-top:250px; 
  padding:10px; 
  border:1px solid black; 
  perspective:500px; 
} 
#inner{ 
  width:100px; 
  height:100px; 
  text-align:center; 
  line-height:100px; 
  font-size:12px; 
  position:absolute; 
  border:1px solid black; 
  background-color:yellow; 
  transform:rotateX(30deg);   
} 
table{    
  font-size:12px;    
  width:500px;    
  margin-left:280px;  
  text-align:left;  
}    
.left{ 
  text-align:right; 
  width:150px; 
} 
</style> 
<script type="text/javascript">   
function change(value){   
  var obox=document.getElementById('box');   
  var oshow=document.getElementById('show');   
      
  obox.style.perspective=value+"px";
  oshow.innerHTML=value;   
}  
window.onload=function(){  
  var range=document.getElementById("range");  
  range.onmousemove=function(){  
    change(this.value);  
  }  
}  
</script>  
</head> 
<body> 
<div id="box"> 
  <div id="inner">螞蟻部落</div> 
</div> 
<table>   
  <tr>   
    <td class="left">perspective值:</td>   
    <td><input type="range" min="100" step="1" max="800" id="range" value="500"/></td>   
  </tr>   
  <tr>   
    <td class="left">perspective:</td>   
    <td>(<span id="show">500</span>)</td>   
  </tr>   
</table>   
</body>   
</html>

程式碼簡單分析如下：

（1）.在舞臺元素上設定perspective初始值為500px。

（2）.子元素inner進行3d變換，在x軸上旋轉30deg。

（3）.拖動底部的range元素調整perspective屬性值的大小。

（4）.值越小，也就是視點距離元素越近，視覺上也就越大，反之，視覺上越小。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>螞蟻部落</title>  
<style>
#box{
  position:relative;
  height:150px;
  width:150px;
  margin-left:450px;
  margin-top:250px;
  padding:10px;
  border:1px solid black;
  perspective:1200px;
}
#ant{
  width:100px;
  height:100px;
  text-align:center;
  line-height:100px;
  font-size:12px;
  border:1px solid black;
  background-color:yellow;
  transform:translate3d(0px,0px,0px);
}
table{   
  font-size:12px;   
  width:500px;   
  margin-left:220px; 
  text-align:left; 
}   
.left{
  text-align:right;
  width:150px;
}
</style>
<script type="text/javascript">  
function change(z){  
  var odiv = document.getElementById("ant");
  var oshow = document.getElementById("show");
  odiv.style.transform = "translate3d(0px, 0px," + z + "px)";
  oshow.innerHTML = z_range.value;
} 
window.onload=function(){ 
  var z_range = document.getElementById("z_range");
  z_range.onmousemove = function () {
    change(z_range.value);
  }
} 
</script> 
</head>
<body>
<div id="box">
  <div id="ant">螞蟻部落</div>
</div>
<table>   
  <tr>
    <td class="left">z軸位移:</td>
    <td><input type="range" min="-200" step="1" max="1300" id="z_range" value="0" /></td>
  </tr>    
  <tr>  
    <td class="left">z:</td>  
    <td>(<span id="show">0</span>)</td>  
  </tr>  
</table>  
</body>  
</html>

上述程式碼分析如下：

（1）.在舞臺元素上設定perspective初始值為1200px。

（2）.子元素ant進行3d變換，translate3d引數只都是0。

（3）.當z軸位移為0的時候，無論perspective怎麼變化，元素都保持原來的大小，這是因為元素的3D效果最終都是影射在Z軸等於0這個平面上，當Z軸原本等於零的時候，無法產生影射，自然保持原有大小。當將Z軸座標值調整變大後，在視覺上我們看到元素變大，因為相當於距離視點近了，反之，會變小，距離視點遠了。大家可以試著調整Z軸的座標大於perspective屬性值（1200px），這是就無法看到紅色元素了，原因很簡單，這是由於元素已經約過視點了，相當於東西跑到你後腦勺去了。

相關文章