While working on a vertical carousel and rotating it 180deg on the X-axis, I noticed that the backside of the carousel appears to have an incorrect orientation in 3D space. I'm looking for a solution that not only includes the code but also explains why this issue is occurring.
#container1 {
position: relative;
left: 100px;
width: 200px;
height: 600px;
transform-style: preserve-3d;
transform-origin: 0 300px 0;
perspective-origin: 100px 300px 0;
perspective: 800px;
animation-name: rotate;
animation-duration: 5s;
}
@keyframes rotate {
from {transform: rotateX(0deg);}
to {transform: rotateX(180deg);}
}
#container1 div {
position: absolute;
top: 225px;
width: 150px;
height: 150px;
}
#div1 {
transform: rotateX(0deg) translateZ(130px);
background-color: red;
}
#div2 {
transform: rotateX(60deg) translateZ(130px);
background-color: blue;
}
#div3 {
transform: rotateX(120deg) translateZ(130px);
background-color: green;
}
#div4 {
transform: rotateX(180deg) translateZ(130px);
background-color: brown;
}
#div5 {
transform: rotateX(240deg) translateZ(130px);
background-color: orange;
}
#div6 {
transform: rotateX(300deg) translateZ(130px);
background-color: pink;
}<html>
<head>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div id="container1">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
<div id="div5"></div>
<div id="div6"></div>
</div>
<script src="script.js"></script>
</body>
</html>