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>