3D效果_perspective属性

基础

css3中的transform可以做2D操作，当然也有3D操作。

3D效果的显示在于父元素必须有一个perspective属性。

例如：

<div class="div1">	<!-- perspective -->
	<div class="div2"></div>	<!-- transform -->  
</div>

perspective属性

perspective属性可以定义3D视觉的角度，可以使子元素显示3D特效。
perspectice视距，表示视点距离屏幕的长短，视点，用于模拟透视效果时人眼的位置
perspective一般作为一个属性，设置个父元素，作用于所有3D转换的子元素

例如：

perspective:150px; 

视距 距离 眼睛到屏幕的距离 视距越大 效果越不明显 视距越小 效果透视越明显

perspective-origin属性

perspective-origin属性定义X和Y轴为基础的3D位置

perspective-origin使用方法：

属性值：(x轴:left,center,right,长度，百分比；Y轴:left,center,right,长度，百分比)

perspective-origin: 40% 60%;
perspective-origin: 40px 60px;
perspective-origin: left bottom;

注意

perspective和perspective-origin受影响的是子元素，而非元素本身