课堂笔记4月19

最新推荐文章于 2024-10-29 17:04:01 发布

蒸汽秋葵y

最新推荐文章于 2024-10-29 17:04:01 发布

阅读量72

点赞数

本文链接：https://blog.csdn.net/y850266/article/details/115859976

版权

perspective:用来模拟人类的视觉位置，也称为视距，即人
的眼睛到屏幕（成像）的距离
perspective:单位是像素PX
perspective:值越大，表示视距越远，成像越小，反之。
perspective写在被观察元素的父盒子上。

transform-style:
控制子元素是否开启3D空间效果。flat/prassrve-3D
flat:不开启3D空间，默认值。2D平面显示
preserve-3D:子元素开启3D立体空间
写在父盒子上
transform-style:preserve-3d;
-webkit-transform-style:preserve-3d; 兼容Google和Opera
-moz-transform-style:preserve-3d; 兼容火狐

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			*{
				margin:0;
				padding:0;
			}
			body{
				width:100vw;
				height:100vh;
				/* 视距 */
				perspective:100px;
				transform-style:preserve-3d;
			}
			.box{
				position:absolute;
				top:50%;
				left:50%;
				transform:translate(-50%,-50%) rotatey(-45deg);
				width:200px;
				height:200px;
				background-color:skyblue;
			}
			
		</style>
	</head>
	<body>
		<div class="box"></div>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			*{
				margin:0;
				padding:0;
			}
			body{
				width:100vw;
				height:100vh;
				perspective:1000px;
			}
			div{
				position:absolute;
				top:50%;
				left:50%;
			}
			.box{
				width:200px;
				height:300px;
				background-color:rgba(0,0,255,.3);
				transform:translate(-50%,-50%) rotatey(72deg);
				transform-style:preserve-3d;
			}
			.box1{
				width:100px;
				height:300px;
				background-color:rgba(255,0,0,.3);
				transform:translate(-50%,-50%) rotatex(45deg);
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="box1"></div>
		</div>
		
	</body>
</html>