0
我在垂直方向上製作了一個旋轉木馬，但是在旋轉X軸的180deg時，旋轉木馬的背面看起來像是它的方向在3D空間中不合適。
我寧願提供的解決方案不僅包含代碼，還要推理爲什麼會發生這種情況。垂直方向的簡單3D旋轉木馬無法正常工作？
#container1 {
position: relative;
\t left: 100px;
\t width: 200px;
\t height: 600px;
\t transform-style: preserve-3d;
\t transform-origin: 0 300px 0;
\t perspective-origin: 100px 300px 0;
\t perspective: 800px;
\t animation-name: rotate;
\t animation-duration: 5s;
}
@keyframes rotate {
\t from {transform: rotateX(0deg);}
\t to {transform: rotateX(180deg);}
}
#container1 div {
\t position: absolute;
\t top: 225px;
\t width: 150px;
\t height: 150px;
}
#div1 {
\t transform: rotateX(0deg) translateZ(130px);
background-color: red;
}
#div2 {
\t transform: rotateX(60deg) translateZ(130px);
\t background-color: blue;
}
#div3 {
\t transform: rotateX(120deg) translateZ(130px);
\t background-color: green;
}
#div4 {
\t transform: rotateX(180deg) translateZ(130px);
\t background-color: brown;
}
#div5 {
\t transform: rotateX(240deg) translateZ(130px);
\t background-color: orange;
}
#div6 {
\t transform: rotateX(300deg) translateZ(130px);
\t background-color: pink;
}<html>
<head>
\t <link href="style.css" rel="stylesheet">
\t </head>
\t <body>
\t <div id="container1">
\t \t <div id="div1"></div>
\t \t <div id="div2"></div>
\t \t <div id="div3"></div>
\t \t <div id="div4"></div>
\t \t <div id="div5"></div>
\t \t <div id="div6"></div>
\t \t </div>
<script src="script.js"></script>
\t </body>
</html>