<!DOCTYPE html>
<html>
<head>
<!-- 考点2D旋转，位移，缩放，倾斜和3D -->
<meta charset="utf-8" />
<title>三维</title>
<style type="text/css">
body{
/* 透视 */
perspective: 1000px;
perspective-origin: 50% 50%;
}
div{
width: 400px;
height: 400px;
}
.box1{
margin: 200px auto; /* 考点水平居中 */
background-color: aqua;
transform-style: preserve-3d; /* 给盒子开启3D空间效果 */
background-color:rgba(0,255,255,0.4);
}
.box2{
background-color: deeppink;
transform: rotateX(45deg);
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">
</div>
</div>
</body>
</html>