perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。
当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。
提示：请与 perspective-origin 属性一同使用该属性，这样您就能够改变 3D 元素的底部位置。
tramsform-style:使被转换的子元素保留其 3D 转换;
语法：transform-style: flat|preserve-3d;
transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素。
注释：该属性必须与 transform 属性一同使用。在chrome中发现一个问题，那就是perspective一定要在rotateY（或rotateX）的前面。如果代码写成下面的情况，perspective的设置会无效。
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>perspective</title>
<style>
.contain {
width: 200px;
height: 200px;
padding:10px;
box-sizing: border-box;
border: 1px solid yellow;
// perspective: 500px;
}
.ct1 {
width: 180px;
height: 180px;
line-height: 180px;
border:1px solid #ccc;
// transform-style: preserve-3d;
transform:rotateX(45deg);
background:red;
text-align: center;
color:greenyellow;
}
</style>
</head>
<body>
<div class="contain">
<div class="ct1">
1
</div>
</div>
</body>
</html>通过设置perspective的属性可以明显看到区别；
perspective：的兼容性不是很好，
相关文章：https://blog.csdn.net/dwb123456123456/article/details/82860487