gpt4 book ai didi

html - 垂直方向的简单 3-D 旋转木马无法正常工作?

转载 作者:行者123 更新时间:2023-11-28 05:40:06 26 4
gpt4 key购买 nike

我在垂直方向上制作了一个旋转木马,但是在 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>

最佳答案

问题是您将 perspective 放在了 #container 中。您应该将透视 放在“舞台”中。在这里你可以实现:JSFiddle

关于html - 垂直方向的简单 3-D 旋转木马无法正常工作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37940668/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com