版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
透视(perspective)
电脑显示屏是一个2D平面，图像之所以具有3D效果，其实只是一种视觉呈现，通过透视可以实现此目的。
透视可以将一个2D平面，在转换的过程当中，呈现3D效果。
透视原理：近大远小
浏览器透视：把近大远小的所有图像，秀视在屏幕上。
perspective:视距，表示视点距离屏幕的长短。视点，用于模拟透视效果时人眼的位置；
注：
1、并非任何情况下需要透视效果，根据开发需要进行设置；
2、是给父元素加上去的
视距越大，效果越不明显，视距越小，效果越明显；
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div:first-child{
width: 100px;
height: 100px;
background-color: green;
}
div:nth-child(2) {
width: 100px;
height: 100px;
background-color: pink;
transition: all 3s; /*过渡*/
}
div:hover:nth-child(2){
transform: rotateY(60deg);
}
body {
margin-left: 100px;
perspective: 1000px;
}
</style>
</head>
<body>
<div>原图</div>
<div>3D-透视</div>
</body>
</html>效果如下：
