您的位置:首页> 前端教程> CSS3教程
文章导航

CSS perspective(n)

2018-5-21 18:14| 作者: admin| 查看: 3445| 评论: 0|来自: 蚂蚁部落

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属性。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部