我正在尝试旋转一个带有关键帧的立方体,使其保持沿相同方向旋转而不向后旋转,并保持沿一个方向水平旋转而不无限旋转。
<div class="cube">
<div class="cube-face front"></div>
<div class="cube-face back"></div>
<div class="cube-face right"></div>
<div class="cube-face left"></div>
<div class="cube-face top"></div>
<div class="cube-face bottom"></div>
</div>
CSS 度数超过 360 度并且似乎没有停止...正如您在当前关键帧中看到的那样,立方体将向后旋转,是否有解决方案可以通过 CSS 使其继续旋转?
.cube {
width: 250px;
height: 250px;
position: relative;
transform-style: preserve-3d;
transform: rotateX(315deg) rotateY(-45deg);
animation: rotate-cube 5s infinite;
margin-bottom: 50px;
cursor: pointer;
}
.cube-face {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
width: 250px;
height: 250px;
border: 2px solid black;
font-size: 90px !important;
font-weight: bold;
color: #000;
}
.cube .front {
background: #f15d2a;
transform: rotateY(0deg) translateZ(125px);
}
.cube .right {
background: #0063a6;
transform: rotateY(90deg) translateZ(125px);
}
.cube .back {
background: #ed1652;
transform: rotate(0deg) rotateY(180deg) translateZ(125px);
}
.cube .left {
background: #12b259;
transform: rotateX(0) rotateY(-90deg) translateZ(125px);
}
.cube .top {
background: #fff;
transform: rotateY(0deg) rotateX(90deg) translateZ(125px);
}
.cube .bottom {
background: #ffd54c;
transform: rotatey(90deg) rotateX(-90deg) translateZ(125px);
}
@keyframes rotate-cube {
0% {
transform: rotateX(315deg) rotateY(-45deg);
}
33.33% {
transform: rotateX(315deg) rotateY(-135deg);
}
66.66% {
transform: rotateX(315deg) rotateY(-225deg);
}
100% {
transform: rotateX(315deg) rotateY(-45deg);
}
}
最佳答案
假设您希望结束和开始具有相同的旋转,您可以将最终旋转设置为 -405deg (360 + 45)。
这应该确保动画以正确的方向继续。
0% {
transform: rotateX(315deg) rotateY(-45deg);
}
33.33% {
transform: rotateX(315deg) rotateY(-135deg);
}
66.66% {
transform: rotateX(315deg) rotateY(-225deg);
}
100% {
transform: rotateX(315deg) rotateY(-405deg);
}
关于css - 变换在同一旋转中旋转度数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/71750784/