CSS——景深perspective属性

最新推荐文章于 2023-04-28 12:35:54 发布

流灬

最新推荐文章于 2023-04-28 12:35:54 发布

阅读量3k

点赞数 1

分类专栏：笔记文章标签： css

本文链接：https://blog.csdn.net/qq_41625074/article/details/104733796

版权

笔记专栏收录该内容

9 篇文章 1 订阅

订阅专栏

学习了css的3D动画属性和过渡属性后，我们已经可以用它来实现一些动画效果了，比如实现一个正方体。但是当我们实现了这个效果后会发现一个问题，就是我们能看到的面的大小都是一样的。事实上，它每个面的大小确实是一样大的，但是结合现实生活，我们会发现这样一个现象——相同大小的物体，假设它摆在我们眼睛的正前方，我们所能感知到它的大小也是会随着它离我们的距离而改变的。离我们越近，我们感知上感觉它越大，越远越小。

我现在要介绍的景深属性perspective就使我们用3D属性实现的效果更加贴合现实生活了。

perspective属性指是元素的Z平面距离用户之间的距离。浏览器通过该距离来计算用户的视角大小，从而制造出近大远小的3D效果。它的属性值是数字（取正数）加上px。如果还不是很理解，那么我现在用正方体来举例说明：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin:0;
				padding:0;
			}
			body{
				perspective:1200px; /*在父元素中加景深属性*/
			}
			ul{
				width: 200px;
				height:200px;
				position:relative;
				margin:300px auto;
				transform-style: preserve-3d;
				animation:box 6s linear infinite;
				
				
			}
			li{
				list-style: none;
				width:200px;
				height:200px;
				position:absolute;
				left:0;
				top:0;
			}	
			li:nth-child(1){
				transform:translateZ(-100px) rotateY(-180deg);
				background:blueviolet;
				opacity: 0.5;
			}
			li:nth-child(2){
				transform:translateY(-100px) rotateX(90deg);
				background:darkorange;
				opacity: 0.5;
			}
			li:nth-child(3){
				transform:translateY(100px) rotateX(-90deg);
				background:tomato;
				opacity: 0.5;
			}
			li:nth-child(4){				
				transform:translateX(-100px) rotateY(-90deg) ;
				background:orchid;
				opacity: 0.5;
			}
			li:nth-child(5){
				transform:translateX(100px) rotateY(90deg);
				background:greenyellow;
				opacity: 0.5;
			}
			li:nth-child(6){
				transform:translateZ(100px);
				opacity: 0.5;
				background: paleturquoise;
			}
			ul:hover{
				animation-play-state: paused;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
		</ul>
	</body>
</html>

上面的代码中body加的景深属性，要是它不运用将属性值改为0即可。

下面是没有景深属性的效果：