<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html{
/* 设置当前网页的视距为800px, 人眼距离网页的距离*/
perspective: 800px;
}
body{
background-color: silver;
border:1px solid red;
}
.box{
width: 100px;
height: 100px;
background-color: springgreen;
margin: 200px auto;
/* 设置所有属性的过渡时间为1s */
transition: all 1s;
}
body:hover .box{
/* z轴的向上偏移500px */
transform:translateZ(500px);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
