该方法建立的三维变换距离在CSS3属性上
看属性是三维变形的关键。这个属性设置观众的位置和地图的视觉内容锥然后抛出一个二维视图平面的角度。如果没有指定，在Z轴的空间将铺设到相同的2D视图平面所有的点，和景深的概念不会在转换结果存在。上述描述可能很难理解。事实上，对于透视属性，我们可以简单地理解视觉距离，它用来设置用户和元素3d空间z平面之间的距离，其效果取决于它的值。数值越小，用户与3d空间z平面之间的距离越近，视觉效果就越深刻。与此相反，该值越大，用户与3d空间的z平面之间的距离越远，视觉效果非常小。
对于三维变形，例如，对于一些变形，下面的例子演示了沿z轴的变形，透视属性对于观察变形的影响是必不可少的。
让我们看一个简单的例子来创建一个3D旋转效果的扑克牌，并添加一个视距透视的父母元素的扑克牌，而另一个不成立。
HTML
xml代码将内容复制到剪贴板。
CSS
CSS代码将内容复制到剪贴板。
{ div
宽度：500px；
身高：300px；
保证金：30px汽车；
职位：相对；
背景：URL（图片/数据网格）不重复中心；
背景尺寸：100% 100%；
}
div img {
位置：绝对；
顶部：50%；
左：50%；
margin-left: - 71px；
边距：- 100px；
来源：bottombottom变换；
}
div img：nth-child（1）{
不透明性：5；
Z指数：1；
}
div img：nth-child（2）{
Z指数：2；
变换：rotatex（45deg）；
}
类型（2）{的n
观点：500px；
}
结果如下：
上面的图片显示了所有的效果，如果父节点没有设置透视图，Mei King的3D旋转效果不明显，但是当父节点设置透视图时，梅花王像3D一样旋转。
一个简单的例子演示了透视法的使用，我们回头来看看透视语法的用法：
CSS代码将内容复制到剪贴板。
观点：没有|
看属性包含两个属性：没有和单位长度的值，看属性的默认值是None，表示看3D对象的一个无限的角度，但它看起来平坦。另一个值接受价值超过0个单位长度，单位不能百分之一比。值越大，越远的角度出现，从而创建一个低强度和很小的三维空间变化。另一方面，值越小，越接近角似乎创建一个高强度的角度和一个大型的三维变化。
例如，你站在10英尺和1000英尺，看一块10英尺，10英尺，你是大小的立方体一样。所以视角远大于1000英尺，和尺寸是从距离的立方体的距离的百分之一。相同的思维适用于角度的价值。让我们看一个例子来加强理解：
HTML
xml代码将内容复制到剪贴板。
一
六
四
三
五
二
一
六
四
三
五
二
CSS
CSS代码将内容复制到剪贴板。
{。包装
宽度：50%；
浮点数：左；
}
{。立方体
字体大小：4em；
宽度：2em；
保证金：1.5em汽车；
风格：preserve-3d变换；
变换：rotatex（- 40deg）rotatey（32deg）；
}
{。侧
位置：绝对；
宽度：2em；
身高：2em；
背景：RGBA（255, 99, 71，0.6）；
border: 1px solid RGBA（0, 0, 0，0.5）；
颜色：白色；
文本对齐：中心；
行高：2em；
}
{之前。
变换：translatez（1em）；
}
{。顶
变换：rotatex（90度）translatez（1em）；
}
{。错误
变换：rotatey（90度）translatez（1em）；
}
{左。
变换：rotatey（- 90度）translatez（1em）；
}
{。bottombottom
变换：rotatex（- 90度）translatez（1em）；
}
{。回来
变换：rotatey（- 180deg）translatez（1em）；
}
{。W1
观点：100px；
}
W2 {。
观点：1000px；
}
效果如下图所示：
在以上介绍的基础上，我们可以对视角的价值作一个简单的总结。
1.perspective没有或没有设置，并没有真正的三维空间。
2.perspective的值越小，对3D，那效果更明显，如果你的眼睛是真实的三维。
3.perspective的价值是无限大的，或当该值为0，它是作为无价值的。
为了更好的理解视角的属性，有必要结合的关系，他和translatez之间。事实上，你可以简单的理解角度值为人眼与显示器之间的距离，并将3D对象和源点的距离。接下来，我们使用图片来解释和translatez W3C角度之间的关系。
上面的图显示的角度产权比率的translatez位置。对于顶尖人物，Z是一半为了使用原来的圈（轮廓）出现在Z轴（徐鲜于安），帆布上的实心圆将扩大两部分，如淡蓝色的圆圈。在底部的图，圆是按比例降低，造成虚线出现在画布上，和Z的大小是1 / 3从原来的位置。
在三维变形，除了看属性可以激活一个三维空间，透视（）在三维变形函数也可以激活的三维空间，它们之间的区别是，视角是用于舞台元素（变形元素共同的父元素），角度（）是用于对当前变形元素，它可以与其他变换函数一起使用。例如，我们可以采取以下：
CSS代码将内容复制到剪贴板。
{。阶段
观点：600px
}
写为：
CSS代码将内容复制到剪贴板。
stage.box {。
变换视角（600px）；
}
看一个简单的例子：
HTML
xml代码将内容复制到剪贴板。
CSS
CSS代码将内容复制到剪贴板。
{。阶段
宽度：500px；
身高：300px；
保证金：30px汽车；
职位：相对；
背景：URL（图片/数据网格）不重复中心；
背景尺寸：100% 100%；
}
{容器。
位置：绝对；
顶部：50%；
左：50%；
宽度：142px；
身高：200px；
边境：1px点缀橙色；
margin-left: - 71px；
边距：- 100px；
}
img {容器。
变换：rotatey（45deg）；
}
阶段：第n个子（1）。容器{
观点：600px；
}
。阶段：nth-child（2）img {
变换视角（600px）rotatey（45deg）；
}
结果如下：
上述图的效果表明，虽然写的形式，属性的名称不一致，但效果是一样的。
虽然透视属性与透视（）函数的功能相同，但是它的值和图像的使用是不同的：
1、透视属性可以是无或长度值，透视（）函数只能超过0。如果3D值小于0或小于0，它将不会激活3D空间。
的2.perspective属性用于变形的像父元素；角度（）函数用于变形图像本身和要使用的转换等功能。
透视源属性
透视原点属性是三维变形中的另一个重要属性，它主要用来确定透视属性的源点，它实际上设置了x轴和y轴的位置，在那里，观察者似乎在观察元素的元素。
透视原点属性的使用语法也很简单：
复制代码如下：透视来源：{左中右| | | | |顶|底} || |左右} { |中心| | |顶|中心|底} }
此属性的默认值是50% 50%（即，中心），也可以将其设置为一个值，也可以将其设置为两个长度值：
第一个长度值指定在容器盒相对于元素的X轴的位置。它可以是一个长度值（一支长度单位表示），百分比或下面的三个关键词：左（代表框中的X轴长度0%），中心（表示中间点），或右（代表100%的长度）。
第二个长度值指定包含元素的元素的y轴上的位置，它可以是三个关键字之一：长度值，百分比或以下：顶部（代表盒中Y轴长度的0%），中心（表示中间点），或底部（代表长度的100%）。
需要注意的是，为了向子元素的转化深度，角度起源属性必须定义父元素。一般来说，看产地属性本身不做任何事情，它必须在设定的角度属性定义的元素。换句话说，看产地属性需要结合透视属性将观点以外的元素的中心位置，如下图所示：
我们经常可以看到一个东西不可能在中心看到。如果我们想改变立场去看它，此时我们就无法摆脱透视原点的属性。下面的W3C官方网站的图表可以简单地解释这一观点。