perspective：表示用户与z=0的水平面之间的距离。0和负值都是无效值。
如果z轴坐标的值大于perspective的值，就不会画出来了。
使用perspective且值不为0 或 none,就会创建一个新的上下文栈（stacking context）。
perspective值越小，透视图越深。




参考：  
        https://developer.mozilla.org/en-US/docs/Web/CSS/perspective

全部
四级
六级
考研
It's nice to have people agree, but you need conflicting perspectives to dig out the truth.
出自-2015年12月阅读原文
What I mean by that is the current perspective of the digital textbook is it's an exact copy of the print book.
出自-2013年6月阅读原文
Meditation (静思) techniques, in contrast, can teach people to put their shortcomings into a larger, more realistic perspective.
出自-2010年6月阅读原文
First,some historical perspective.
出自-2014年6月阅读原文
Obama's presidency viewed from a global perspective.
出自-2010年6月阅读原文
If someone has a great sense of humor, were a son, it means that they are happy, socially confident and have a healthy perspective on life.
出自-2013年12月听力原文
But most of all we need to keep the long-term perspective in mind: that even if computers will outsmart us, we can still be the most creative.
2019年6月六级真题(第三套)阅读 Section C
From a political perspective, we need to understand the terms on which major countries like China and the USA might sign up to a global agreement because at the moment we don't have that consensus.
2016年12月六级真题(第二套)听力 Section A
From a societal perspective, phone checking is less like belching in public and more like another bad habit.
2017年12月六级真题(第一套)阅读 Section B
Getting input from others not only offers a fresh perspective and thought process, it often also includes riskier choices.
2018年6月六级真题(第三套)阅读 Section C
One of the things that businesses and indeed government organizations often fail to do is to really see what is happening from the consumer's perspective.
2017年6月六级真题(第二套)听力 Section C
Pamela Harris, a lecturer at the University of Texas at Austin, has a similar perspective.
2018年12月六级真题(第二套)阅读 Section C
Personally, I do not believe in any of these slimming gadgets and I think I have a very different perspective when it comes to the definition of what is beautiful.
2019年6月六级真题(第一套)听力 Section C
Some experts even consider lying a developmental milestone, like crawling and walking, because it requires sophisticated planning, attention and the ability to see a situation from someone else5 s perspective to manipulate them.
2019年12月六级真题(第一套)阅读 Section C
This long perspective makes the pessimistic view of our prospects seem more likely to be a passing fad.
出自-2013年考研阅读原文
It allows us to have perspective on our lives - the ability to not take ourselves too seriously, to laugh at ourselves, to see the bigger picture, and to see that things will work out.
出自-2016年考研翻译原文
"It's already a huge problem from a public expenditure perspective for the whole country," he says.
2017年考研真题(英语二)阅读理解 Section Ⅱ
It's just about putting things into perspective.
2019年考研真题(英语二)阅读理解 Section Ⅱ

     perspective：大概表现的3d元素的展现出来，没有他，3d效果展现不大出来，他作用的是自己的子3d元素。
    perspctive：Z；
   perspective-origin：x，y；

当你只设置
rotateX( angle )
rotateY( angle )
rotateZ( angle )这三个方法的时候，他看上去像2d的，实际上是3D的，
比如
<div id="animateTest" >
    <img src="http://imgcache.qq.com/ptlogin/head/1_100.gif" 
         width="100" height="100">
</div>

<div id="animateTest" 
     style="-webkit-transform: rotateY(40deg);">
    <img src="http://imgcache.qq.com/ptlogin/head/1_100.gif" 
         width="100" height="100">
</div>
第一张图是原始状态的DIV，第二张图是旋转后的效果。

图1：



现在我们试试perspective属性。我们设置perspect=400px。
<div id="animateTest" 
     style="-webkit-transform: perspective(400px) rotateY(40deg);">
<img src="http://imgcache.qq.com/ptlogin/head/1_100.gif" 
     width="100" height="100">
</div>
图2：


可以明显的看出加了perspective，会使元素呈现3D效果。
其实可以将元素和perspective比作成在照相，元素是拍摄的物体，而perspective是镜头，有近大远小的显示方式，镜头方向只能是垂直于Z轴向屏幕内，也就是从屏幕正前方向里看。

可以调整镜头与平面位置：

a) perspective属性设置镜头到元素平面的距离。所有元素都是放置在z=0的平面上。比如perspective(300px)表示，镜头距离元素表面的位置是300像素。
b) perspective-origin属性规定了镜头在平面上的位置。默认是放在元素的中心。

当你设置的perspective越大时，就相当于镜头离物体越远，拍摄的旋转程度就越小，当无限大时，就会出现图1中的效果了，当与物体的距离适当时，就能清晰地看出物体的旋转。



不过在chrome中发现一个问题，那就是perspective一定要在rotateY（或rotateX）的前面。如果代码写成下面的情况，perspective的设置会无效。
<div id="animateTest" style="-webkit-transform: rotateY(40deg) perspective(400px);">

在FireFox中也是这种情况。

当perspective的属性值为0或负值或none（none是默认值）时，没有透视效果的。就是2D效果

perspective有两种写法：

1).放在应用元素的父元素上 2).放在应用的元素上
<div class="parent perspective">
    <h1>Using perspective property on parent</h1>
    <div class="child"></div>
    <!--......-->
</div>

<div class="parent transform">
    <h1>Using transform: perspective() on children</h1>
    <div class="child"></div>
    <!--......-->
</div>

.parent.perspective {
  perspective: 50em;
}

.parent.perspective .child {
  transform: rotateX(50deg);
  background: tomato;
}

.parent.transform .child {
  transform: perspective(50em) rotateX(50deg);
  background: deepskyblue;
}
下图左边为perspective属性的效果，右边为transform:perspective()的效果



可以明显看出差别，左边那张9个框相当于用一个照相机照下来的，而右边9个框相当于每个框用一台专属照相机拍下来的，这就是区别。




backface-visibility 属性
<!DOCTYPE html>
<html>
<head>
<style>
div
{
position:relative;
height:60px;
width:60px;
border:1px solid #000;
background-color:yellow;
transform:rotateY(30deg);
}
#div1
{
backface-visibility:hidden;

}
#div2
{
backface-visibility:visible;

}
</style>
</head>
<body>

<p>本例有两个 div 元素，均旋转 180 度，背向用户。</p>

<p>第一个 div 元素的 backface-visibility 属性设置为 "hidden"，所以应该是不可见的。</p>

<div id="div1">DIV 1</div>

<div id="div2">DIV 2</div>

<p><b>注释：</b>本例只在 Internet Explorer 10、Firefox、Chrome 以及 Safari 中有效。</p>

</body>
</html>





这个属性指的是当你旋转到元素的正面朝上时，如图






把
transform:rotateY(30deg);变成
transform:rotateY(180deg);




div1和div2都背部朝上时，




transform-style 属性


transform-style属性是3D空间一个重要属性，指定嵌套元素如何在3D空间中呈现。他主要有两个属性值：flat和preserve-3d。

transform-style属性的使用语法非常简单：
transform-style: flat | preserve-3d


其中flat值为默认值，表示所有子元素在2D平面呈现。preserve-3d表示所有子元素在3D空间中呈现。


也就是说，如果对一个元素设置了transform-style的值为flat，他的所有子元素在旋转时，都是以网页平面的x轴，y轴，z轴进行变换的，但是如果该元素设置成了preserve-3d，那么他的所有子元素在进行变换时，都是以父元素旋转以后的父元素平面为准线进行变形的

transform-style属性需要设置在父元素中，并且高于任何嵌套的变形元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
	
		#div1
		{
		position: relative;
		height: 200px;
		width: 200px;
		margin: 100px;
		padding:10px;
		border: 1px solid black;
		}
		
		#div2
		{
		padding:50px;
		position: absolute;
		border: 1px solid black;
		background-color: red;
		transform: rotateY(60deg);
		
		}
		
		#div3
		{
		padding:40px;
		position: absolute;
		border: 1px solid black;
		background-color: yellow;
		transform: rotateY(90deg);
		
		}
</style>
</head>

<body>
<div id="div1">
  <div id="div2">HELLO
  	<div id="div3">YELLOW</div>
  </div>
</div>

</body>
</html>


上例中，父元素没有设置preserve-3d，子元素旋转90度


子元素消失了，所有可以说明是以页面为轴线
给父元素加上preserve-3d，再将子元素旋转的角度变成30度，变成如图


子元素旋转的角度加上父元素旋转的角度是90度，上图正好显示出子元素旋转的正是90度，所以加上preserve-3d，是以父元素旋转之后父元素的页面为轴线


有一点需要特别提醒大家，如果你的元素设置了transform-style值为preserve-3d，就不能为了防止子元素溢出容器而设置overflow值为hidden，如果设置了overflow:hidden同样可以迫死子元素出现在同一平面（和元素设置了transform-style为flat一样的效果）