3D动画案例
要点：
1.视距越大，看到的效果越小，跟小孔成像同样的原理
2.给父元素添加透视，会作用于子元素
3.backface-visibility设置背向浏览器是否可见
html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
perspective: 1000px;
/*视距，数值越小代表离眼睛距离越小，显示的效果越大*/
}
div{
position: relative;
margin: 300px auto;
width: 350px;
height: 350px;
}
div img{
position: absolute;
top: 0;
left: 0;
transition: all 2s;
}
div:hover img{
transform: rotateY(180deg);
/*同样的单位也是角度*/
}
div img:last-child{
backface-visibility: hidden;
/*背向屏幕时，是否可见*/
}
</style>
</head>
<body>
<div>
<img src="img/hou.svg">
<img src="img/qian.svg">
</div>
</body>
</html>效果;