css3中perspective属性

最新推荐文章于 2024-05-30 14:05:16 发布

HelloGad

最新推荐文章于 2024-05-30 14:05:16 发布

阅读量9.6k

点赞数 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只能设置在元素的父级中。
开始设置的效果：
在这里插入图片描述

很普通的一张图片，当我们来调translateZ移动的大小时，可以观看图片的具体变化。当translateZ(500px)时，效果为：
在这里插入图片描述
当translateZ的大小临近与800px时，效果为：

这时图片离我们越来越近了，当它大于800px时，这个图片就消失了。

这是我们把translateZ的值调整为负数时，看其效果。
在这里插入图片描述
反之当translateZ为负值时，我们可以看到图片变小了，也就是图片离人越来越远了。

这时为什么perspective为800px，translateZ(0px)时，图片大小没有变化呢，如果调整perspective的大小又是什么效果呢？

在这里插入图片描述
这时图片并没有什么变化。

得出结果：
translateZ 的值越大，图片越大。
在这里插入图片描述

translateZ 的值越小，图片越小。

translateZ(0px)的时候，perspective值变大，图片没有变化。是因为图片没有移出div屏幕外面，所以图片没有什么变化。

HelloGad

关注

13
点赞
踩
38

收藏

觉得还不错? 一键收藏
3
评论
css3中perspective属性

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

扫一扫