<html>
<head>
<meta charset="UTF-8">
<title>八桂金融</title>
</head>
<style type="text/css">
body {margin: 0overflow: hidden}
.box {height: 300px}
.num {height: 150pxwidth: 150pxbackground: rgba(255, 255, 255, 0.5)}/*仅仅background被渲染透明度50%*/
.box2 {height: 300px}
.num2 {height: 150pxwidth: 150pxbackground:#fffopacity: 0.5}/*div内容全部都被opacity渲染,透明度50%*/
</style>
<body>
</body>
<div class="box" style="background: url(
)">
<div class="num">
123
</div>
</div>
<br>
<div class="box2" style="background: url(
)">
<div class="num2">
123
</div>
</div>
</html>
透视效果是依赖于人眼来产生的，而人眼的可视范围大概在120度左右，3D物体处在这个范围内产生的透视效果才是真实的，超出这个范围（比如说物体是放在你耳朵边的），人眼看不到了，自然就不会有什么透视效果了，假如这个时候又强行利用电脑手段把这个并不存在的逗透视效果地用图片表现出来，就肯定会出现严重的变形。因此那个属性的x或y值不能设置得太大。你可以自己测试一下：你把手机横着贴在耳边，这时候你的眼睛只能看到手机的一小部分，大部分是看不到的，这时候你看到的手机的透视效果（尽管只有一小部分，而且很模糊，因为它不在你的视觉中心）是真实的，但假如现在要把看不见的那一大部分也用图片表现出来，你脑子里能想象出应该是什么样子吗看
perspective与最终呈现在浏览器上的大小，关系运算；这个公式我在网上没找到 ，用几组数据得出来的结果 ，也测试了几组数据好像也没什么问题，可以用一下；设置了perspective就等于启动了物体的Z轴，Z轴默认为0px
W=物体宽度；
z=translateZ；
p=perspective；
d=最终浏览器渲染的大小；
(w*z) / (p-z) + w=d；
也可以根据一个目标大小推出自己想要的perspective或者translateZ；
(w*z) /( d-w)+z=p
p-(w*z) /( d-w)=z
先了解几点
1.--3D物体的轴，做一个平时看手机的姿势
1.1--你把手机左右移动（头不要动）这就是物体的X轴运动；
1.2--你把手机上下移动（头不要动）这就是物体的Y轴运动；
1.3--你把手机前后移动（头不要动）这就是物体的Z轴运动；（前后移动就是把手机放远点和拉近点，胳膊伸直和弯曲的动作）
2.--perspective定义观察点到被观察物体Z轴的距离（眼睛到手机的前屏与手机背面的中心点距离）；
3.--分清perspective和物体Z轴运动
3.1--如果你的手机不动 ，头前后移动就是perspective在改变；
3.2--如果你的头不动 ，手机前后移动就是Z轴在改变；
4.--如何设置perspective，
perspective设置会改变物体最终呈现在浏览器上的大小和形状；perspective的数值要比translateZ大，否则就看不到物体了，因为他跑到你的眼睛后面去了。
一般弄懂了perspective和translateZ之间的关系后，其他的变形心里就有底了，
比如物体rotateY的时候，我们看到的样子变成另一个样子的过程，脑子就有概念了
5.--例子
<div class="a">
<div class="b">
</div>
</div>
.a{
width:100px
height:200px
margin:300px auto
perspective:60px
}
.b{
width:100%
height:100%
background:#ccc
transform: translateZ(30px)
}
套用上面公式(w*z) / (p-z) + w=d；
(100*30)/(60-30)+100=200
(200*30)/(60-30)+200=400
虽然你设置的宽高为100px*200px，但是你最终看见的大小为200px*400px
最后 可以百度jQuery之家，进入网站搜索perspective，查看2015年-2-2号写的系列文章 （CSS 3D transforms系列教程-perspective）
