初学css做立体盒子模型，盒子旋转过程中被拉伸，最后又回到了一个平面（覆盖其他边框颜色）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 300px;
height: 300px;
margin:200px auto;
/* background-color: pink; */
position: relative;
transform-style: preserve-3d;
transform: rotateX(45deg) rotateY(45deg);
/* perspective: 1000px; */
transition: all 1s;
}
.box .z:nth-child(1) {
width: 300px;
height: 300px;
position: absolute;
background-color: blue;
transform: rotateY(180deg) translatez(150px);
}
.box .z:nth-child(2) {
width: 300px;
height: 300px;
position: absolute;
background-color: green;
transform: rotateY(0) translateZ(150px);
}
.box .z:nth-child(3) {
width: 300px;
height: 300px;
position: absolute;
background-color: yellow;
transform: rotateX(90deg) translateZ(150px);
}
.box .z:nth-child(4) {
width: 300px;
height: 300px;
position: absolute;
background-color: black;
transform: rotateX(-90deg) translateZ(150px);
}
.box .z:nth-child(5) {
width: 300px;
height: 300px;
position: absolute;
background-color: deepskyblue;
transform: rotateY(90deg) translateZ(150px);
}
.box .z:nth-child(6) {
width: 300px;
height: 300px;
position: absolute;
background-color: cornflowerblue;
transform: rotateY(-90deg) translateZ(150px);
}
.box:hover {
transform: rotatey(180deg);
}
</style>
</head>
<body>
<div class="box">
<div class="z">1</div>
<div class="z">2</div>
<div class="z">3</div>
<div class="z">4</div>
<div class="z">5</div>
<div class="z">6</div>
</div>
</body>
</html>