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

CSS perspective 属性

2019-4-20 16:56| 作者: admin| 查看: 1975| 评论: 0|来自: 蚂蚁部落

版本发展到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),这是就无法看到红色元素了,原因很简单,这是由于元素已经约过视点了,相当于东西跑到你后脑勺去了。

1

鲜花

握手

雷人

路过

鸡蛋

刚表态过的朋友 (1 人)

最新评论

返回顶部