Question

我在垂直方向上制作旋转木马，但在X轴的旋转180deg上，旋转木马的背面看起来在3D空间中的方向不正确。
我希望所提供的解决方案不仅包含代码，还包括为什么会发生这种情况。

#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>

Answer 1

问题是您将perspective放入#container。您应该将perspective放在＆＃34;阶段＆＃34;中。您可以在此处实施：JSFiddle

简单的3D垂直方向旋转木马不能正常工作？

1 个答案: