<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>景深透视</title>
<style>
/*
3D变换:
transform-style: preserve-3d; ---- 开启3D空间
perspective ---- 设置景深
1.设置景深透视的元素,会实现近大远小的3D效果。
2.使用方式：给要实现效果的父元素设置
3.最佳效果的取值范围是：800px-1500px
*/
#container{
width: 234px;
height: 488px;
border: 1px solid black;
margin: 200px auto;
transform-style: preserve-3d;
perspective: 800px;
}
img{
transform-origin: right top;
transition:1s all;
}
#container:hover img{
transform: rotateX(45deg);
}
</style>
</head>
<body>
<div id="container">
<img src="../imgs/door.png" alt="">
</div>
</body>
</html>
