WX20200719-125823@2x.png
<!doctype html>
<html>
<head>
<title>标题</title>
<meta charset="utf-8">
<style>
#parent{
width:400px;
height:400px;
border:1px solid #333;
margin:0 auto;
margin-top:100px;
/*规定 子元素以什么样的方式进行显示*/
-webkit-transform-style:preserve-3d;
/**/
/*-webkit-perspective:1000px;*/
position:relative;
transform:rotatex(-20deg);
}
#son{
width:200px;
height:200px;
background:#f00;
position:absolute;
top:100px;
left:100px;
/*旋转 60 deg*//*改变 z 轴位置*/
transform:rotatey(60deg) translatez(200px);
}
#daughter{
width:200px;
height:200px;
background:#0f0;
position:absolute;
top:100px;
left:100px;
/*改变 z 轴位置*/
transform:translatez(200px);
}
#yeye{
/**/
-webkit-perspective:1000px;
}
</style>
</head>
<body>
<div id="yeye">
<div id="parent">
<div id="son">3D位移元素</div>
<div id="daughter">3D位移元素</div>
</div>
</div>
</body>
</html>
