css3中perspective属性

最新推荐文章于 2024-09-25 15:26:19 发布

HelloGad

最新推荐文章于 2024-09-25 15:26:19 发布

阅读量9.7k

点赞数 13

本文链接： https://blog.csdn.net/HelloGad/article/details/105787037

版权

简介：

perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。参数取值：指定观察者距离「z=0」平面的距离，为元素及其内容应用透视变换。不允许负值，none：不指定透视，我们一起来了解一下。

perspective：800px 就是人离屏幕800px 的地方观看这个div元素。

perspective这个属性不是很好的观看效果，可以根据它与translateZ来一起观看其效果，因为时z轴移动，它可以给人一种觉得一个div中的图片离里越来越近。

首先具体代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<style>
	*{
		margin: 0px;
		padding: 0px;
	}
	 body {
            perspective: 800px;
        }
	.wrapper{
	width: 200px;
	height: 200px;
	background-image: url(img/img1.jpg); 
	background-repeat: no-repeat;
	background-size:cover; 
	margin: 200px auto;
	transform: translateZ(0px);	
	}
	</style>
</head>
<body>
	<div class="wrapper"></div>
</body>
</html>

注意：这时我们的translateZ(0px)没有移动，body中也设置了 perspective: 800px;，perspective只能设置在元素的父级中。
开始设置的效果：