演示代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="reset.css"/>
<style type="text/css">
#box{
width: 300px;height: 300px;
background-color: #ccc;
margin: 100px auto;
/* 视距越大，变化越小；视距越小，变化越大 */
/* 视距：可理解为眼睛到屏幕的距离 */
/* 不设置，无穷大，可理解为看不到没有变化 */
perspective: 150px;
}
.wyzx{
width: 300px;height: 300px;background-color: #f00;
}
.wyzx:hover{
/* Z轴方向位移，正往前位移，负往后 */
/* 可理解为元素穿过屏幕通过Z轴向眼睛位移 */
transform: translateZ(100px);
}
</style>
</head>
<body>
<!-- #box>.wyzx -->
<div id="box">
<div class="wyzx"></div>
</div>
</body>
</html>
