<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--景深的作用：
是一个作用于z轴的属性
1、让3D场景有近大远小的效果（就是肉眼距离屏幕的距离）
2、是一个不可以继承的。但他可以作用于后代元素（不是作用于本身的）
原理：
景深越大，灭点越远，元素变形更小
景深越小，灭点越近，元素变形更大
灭点：灭点就是你看到的尽头
景深基点：视角的位置 perspective-origin 50% 50% 参照盒模型
组合变换的话，放本身的话，一定要放在首位，就是组合的话就不需要在祖先元素定义了
transform-style
营造有层级的3d舞台
是一个不可继承属性，他作用于子元素
景深是会叠加的，就是因为是作用于后代元素的，所以祖先元素都会产生叠加
-->
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#wrap{
width: 400px;
height: 400px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -200px;
margin-top: -200px;
border: 1px solid black;
transform-style: preserve-3d;
perspective-origin: ;
}
#inner{
width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -100px;
border: 1px solid pink;
border-radius: 50%;
text-align: center;
line-height: 200px;
font-weight: bold;
transition: 2s;
transform: rotateX(120deg) translateZ(100px);
}
</style>
</head>
<body>
<div id="wrap">
<div id="inner">
Rainbow
</div>
</div>
</body>
</html>
