这个属性具体要怎样描述请自行百度，但是根据我个人对这个属性的理解，这个属性的功能就有点像把平行光设置为聚焦光一样，具体请看下图的分析
注：图片比较难找，大家将就一下
从图中我们可以知道这个属性相当于将默认的平行光置换成焦点光，如果是像perspective:200px，这个我们可以认为是光源离物体的距离是200px，这个数值如果是越大的话，那么等一下的物体呈现就会越小，就如图中来讲，如果是设置为200px会比设置为300px所呈现的书本的大小会更大些，但是如果是物体的Z轴(假设这个时候的物体没有旋转过)的数值大于大于焦点的距离，打个比方就是假设perspective:200px .math_book{-webkit-transform:translateZ(300px)},这个时候就会出现math_book在光源的后面，也就是光源没有覆盖到的地方，这个时候你是在页面中什么效果都没有呈现的，
这个时候不知道各位看官们还能不能理解这段话的意思呢!不懂没有关系，下面通过一个示例来分析一下光源理论是怎样得出来的
HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo1</title>
</head>
<style type="text/css">
#test{
width:400px;
height:400px;
position:absolute;
margin-left:100px;
margin-top: 100px;
/* 光源设置为离页面200像素的位置 */
perspective:200px;
}
#test1{
width:400px;
height:400px;
position:relative;
/* 相当于指定一个3D的空间 */
transform-style:preserve-3d;
}
#div2{
width:400px;
height:400px;
position:relative;
background:lightcoral;
/* 指定变换效果，变换时间为1S */
-webkit-transition: all 1s; }
#test #test1:hover #div2{
/* 绕Y轴旋转180度 */
-webkit-transform: rotateY(180deg);
}
</style>
<body>
<div id="test">
<div id="test1">
<div id="div2"></div>
</div>
</div>
</body>
</html>
效果展示
注：图片有点大，但是也是没有办法的
这个案例中有几点在这里要说明，不知道大家知不知道为什么会出现旋转的好像要与屏幕相撞的原因？其实这个是博主故意这样做得，我在上面的例子中把光源的位置设置为200px但是我们从设置可以知道矩形的宽是400px,旋转的Y轴位置默认的是与Y轴平行，并且穿过中心点，所以我们也就知道了这个旋转半圆的半径是200px，所以这样就导致了光源点与矩形在矩形旋转到90度的时候相碰撞，所以这个时候，我们可以将光源点的位置设置的更远一些，比如说是500px或者是更大，但是这个时候我们应该要注意一点就是，如果设置过大的话，会导致图形在页面中的呈现变小了
