admin 管理员组

文章数量: 1184232

透视(perspective)
电脑显示屏是一个2D平面，图像之所以具有3D效果，其实只是一种视觉呈现，通过透视可以实现此目的。
透视可以将一个2D平面，在转换的过程当中，呈现3D效果。
透视原理：近大远小
浏览器透视：把近大远小的所有图像，秀视在屏幕上。
perspective:视距，表示视点距离屏幕的长短。视点，用于模拟透视效果时人眼的位置；
注：
1、并非任何情况下需要透视效果，根据开发需要进行设置；
2、是给父元素加上去的
视距越大，效果越不明显，视距越小，效果越明显；

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>

	<style type="text/css">
	div:first-child{
		width: 100px;
		height: 100px;
		background-color: green;
	}
	div:nth-child(2) {
		width: 100px;
		height: 100px;
		background-color: pink;	
		transition: all 3s; /*过渡*/
	}	

	div:hover:nth-child(2){
		transform: rotateY(60deg);
	}
	body {
		margin-left: 100px;
		perspective: 1000px;
	}	
	</style>
</head>
<body>
	<div>原图</div>
	<div>3D-透视</div>	
</body>
</html>

效果如下：

本文标签： 透视 perspective

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