CSS perspective(n)

admin發表於2018-05-21
CSS

perspective(n)作用與perspective屬性相同，具體參閱CSS perspective一章節。 

兩者區別在於應用的元素物件不同，此方法直接作用於當前元素，而perspective則應用於舞臺元素，也就是要轉換元素的父元素。

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

程式碼例項如下:

[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;  
} 
#inner{
  width:100px;
  height:100px;
  text-align:center;
  line-height:100px;
  font-size:12px;
  position:absolute;
  border:1px solid black;
  background-color:yellow;
  transform:perspective(100px) translateZ(-60px);
}
table{  
  font-size:12px;  
  width:300px;  
  margin-left:420px;
  text-align:left;
}  
.left{text-align:right} 
</style>
<script type="text/javascript">  
function changeRot(value){  
  var oinner=document.getElementById('inner'); 
  var opersp=document.getElementById('persp');    
  oinner.style.webkitTransform="perspective("+value+"px) translateZ(-60px)";   
  opersp.innerHTML=value;  
} 
window.onload=function(){ 
  var range=document.getElementById("range"); 
  range.onmousemove=function(){ 
    changeRot(this.value); 
  } 
} 
</script> 
</head>
<body>
<div id="box">  
  <div id="inner">螞蟻部落</div>  
</div> 
<table>  
  <tr>  
    <td class="left">視點:</td>  
    <td><input type="range" min="0" step="1" max="360" id="range" value="100"/></td>  
  </tr>  
  <tr>  
    <td class="left">Perspective:</td>  
    <td>(<span id="persp">100</span>)</td>  
  </tr>  
</table>  
</body>  
</html>

建議給轉換元素設定一個舞臺元素，然後給舞臺元素設定perspective屬性。

相關文章