perspective 的作用是可以让子元素有近大远小的视觉效果
transform-style: preserve-3d; 可以让当前元素变成一个真正的3D立体元素
perspective 属性给父元素设置，transform-style: preserve-3d; 给需要转换成真正3D立体的元素本身设置
perspective（实现透视效果），2D 该属性添加给父级，数值一般取值800px-1200px,空间转换时 实现近大远小、近实远虚的视觉效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>透视效果</title>
<style>
.box {
width: 200px;
height: 200px;
margin: 100px auto;
background-color: pink;
transition: all 0.5s;
}
body {
/* 800-1200px */
perspective: 1000px;
}
.box:hover {
transform: translateZ(500px);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
transform-style: preserve-3d； 3D 使子元素处于真正的3d空间， 默认值flat, 表示子元素处于2D平面内呈现。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>3D导航</title>
<style>
ul {
margin: 0;
padding: 0;
list-style: none;
}
.navs {
width: 300px;
height: 40px;
margin: 50px auto;
}
.navs li {
position: relative;
float: left;
width: 100px;
height: 40px;
line-height: 40px;
transition: all 0.5s;
/* 开启3d立体空间 */
transform-style: preserve-3d;
/* 让父盒子沿着Y轴旋转45deg，为看到立方体盒子的侧边 */
/* transform: rotateY(45deg) rotateX(30deg); */
}
.navs li a {
position: absolute;
left: 0;
top: 0;
/* display: block; */
width: 100%;
height: 100%;
text-align: center;
text-decoration: none;
color: #fff;
}
.navs li a:first-child {
background-color: green;
transform: translateZ(20px);
}
.navs li a:last-child {
background-color: orange;
transform: rotateX(90deg) translateZ(20px);
}
.navs li:hover{
transform: rotateX(-90deg);
}
</style>
</head>
<body>
<div class="navs">
<ul>
<li>
<a href="#">首页</a>
<a href="#">Index</a>
</li>
<li>
<a href="#">登录</a>
<a href="#">Login</a>
</li>
<li>
<a href="#">注册</a>
<a href="#">Register</a>
</li>
</ul>
</div>
</body>
</html>