admin 管理员组

文章数量: 1184232

基础

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受影响的是子元素，而非元素本身

本文标签： 属性 效果 perspective

版权声明：本文标题：3D效果_perspective属性 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1766496250a3463842.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。