演示代码:
<!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: 500px;
}
.wyzx{
width: 300px;height: 300px;background-color: #f00;
}
.wyzx:hover{
/* Z轴方向位移,正往前位移,负往后 */
/* 可理解为元素穿过屏幕通过Z轴向眼睛位移 */
/* transform: translateZ(-100px); */
/* 3D位移简写 */
transform: translate3d(50px,50px,-500px)
}
</style>
</head>
<body>
<div id="box">
<div class="wyzx"></div>
</div>
</body>
</html>