为什么我的立方体 'jump' 当我使用 CSS 时像 rotateZ() 那样变换？
Why does my cube 'jump' when I use CSS Transforms like rotateZ()?
我用一个立方体制作了一个简单的动画，它在窗格的边缘周围移动，但在每个角的旋转方式上遇到了问题。对于前两个角，它很好并且旋转平稳，但对于其他角，立方体似乎 'jump' 在它移回原位并继续移动之前。现在我只是在我的转换中使用 rotateZ()。
我试过 transform-origin 之类的东西，但我自己找不到解决方案。我不确定还能做什么，因为我不知道原产地是否有问题，或者是否是尺码问题。我对动画还是新手，所以请原谅任何愚蠢的错误。
请在下面找到代码（HTML 和 CSS 目前为止）。
.perspective {
background: gray;
background-size: 50px 50px;
height: 500px;
left: 50%;
position: absolute;
top: 50%;
width: 500px;
transform: translate(-50%, -50%) rotateX(45deg) rotateZ(45deg);
transform-style: preserve-3d;
-webkit-transform: translate(-50%, -50%) rotateX(45deg) rotateZ(45deg);
-webkit-transform-style: preserve-3d;
backface-visibility: hidden;
}
.cube {
width: 100%;
height: 100%;
position: relative;
transform: scale3d(1.0, 1.0, 1.0) translateZ(25px) translateY(0px) translateX(0px);
transform-origin: 0% 0%;
transform-style: preserve-3d;
animation: test 20s forwards;
}
.cube__face {
position: absolute;
width: 50px;
height: 50px;
background: blue;
}
.cube__face--front {
transform: rotateY( 0deg) translateZ(25px);
background: red;
}
.cube__face--right {
transform: rotateY( 90deg) translateZ(25px);
background: green;
}
.cube__face--back {
transform: rotateY(180deg) translateZ(25px);
background: yellow;
}
.cube__face--left {
transform: rotateY(-90deg) translateZ(25px);
background: pink;
}
.cube__face--top {
transform: rotateX( 90deg) translateZ(25px);
background: purple;
}
.cube__face--bottom {
transform: rotateX(-90deg) translateZ(25px);
background: orange;
}
@keyframes test {
0% {
transform: scale3d(1.0, 1.0, 1.0) translateZ(25px) translateY(0px) translateX(0px);
}
2% {
transform: scale3d(1.0, 1.0, 0.75) translateZ(25px) translateY(0px) translateX(0px);
}
4% {
transform: scale3d(1.0, 1.0, 1.25) translateZ(25px) translateY(75px) translateX(-50px);
}
6% {
transform: scale3d(1.0, 1.0, 1.0) translateZ(25px) translateY(150px) translateX(0px);
}
8% {
transform: scale3d(1.0, 1.0, 0.75) translateZ(25px) translateY(150px) translateX(0px);
}
10% {
transform: scale3d(1.0, 1.0, 1.25) translateZ(25px) translateY(225px) translateX(-50px);
}
12% {
transform: scale3d(1.0, 1.0, 1.0) translateZ(25px) translateY(300px) translateX(0px);
}
14% {
transform: scale3d(1.0, 1.0, 0.75) translateZ(25px) translateY(300px) translateX(0px);
}
16% {
transform: scale3d(1.0, 1.0, 1.25) translateZ(25px) translateY(375px) translateX(-50px);
}
18% {
transform: scale3d(1.0, 1.0, 1.0) translateZ(25px) translateY(450px) translateX(0px);
}
20% {
transform: scale3d(1.0, 1.0, 1.0) translateZ(25px) translateY(450px) translateX(0px);
}
22% {
transform: rotateZ(-90deg) scale3d(1.0, 1.0, 0.75) translateZ(25px) translateX(-500px) translateY(0px);
}
24% {
transform: rotateZ(-90deg) scale3d(1.0, 1.0, 1.25) translateZ(25px) translateX(-450px) translateY(75px);
}
26% {
transform: rotateZ(-90deg) scale3d(1.0, 1.0, 1.0) translateZ(25px) translateX(-500px) translateY(150px);
}
28% {
transform: rotateZ(-90deg) scale3d(1.0, 1.0, 0.75) translateZ(25px) translateX(-500px) translateY(150px);
}
30% {
transform: rotateZ(-90deg) scale3d(1.0, 1.0, 1.25) translateZ(25px) translateX(-450px) translateY(225px);
}
32% {
transform: rotateZ(-90deg) scale3d(1.0, 1.0, 1.0) translateZ(25px) translateX(-500px) translateY(300px);
}
34% {
transform: rotateZ(-90deg) scale3d(1.0, 1.0, 0.75) translateZ(25px) translateX(-500px) translateY(300px);
}
36% {
transform: rotateZ(-90deg) scale3d(1.0, 1.0, 1.25) translateZ(25px) translateX(-450px) translateY(375px);
}
38% {
transform: rotateZ(-90deg) scale3d(1.0, 1.0, 1.0) translateZ(25px) translateX(-500px) translateY(450px);
}
40% {
transform: rotateZ(-90deg) scale3d(1.0, 1.0, 1.0) translateZ(25px) translateX(-500px) translateY(450px);
}
/* X */
42% {
transform: rotateZ(-180deg) scale3d(1.0, 1.0, 0.75) translateZ(25px) translateX(-500px) translateY(-500px);
}
44% {
transform: rotateZ(-180deg) scale3d(1.0, 1.0, 1.25) translateZ(75px) translateX(-500px) translateY(-425px);
}
46% {
transform: rotateZ(-180deg) scale3d(1.0, 1.0, 1.00) translateZ(25px) translateX(-500px) translateY(-350px);
}
48% {
transform: rotateZ(-180deg) scale3d(1.0, 1.0, 0.75) translateZ(25px) translateX(-500px) translateY(-350px);
}
50% {
transform: rotateZ(-180deg) scale3d(1.0, 1.0, 1.25) translateZ(75px) translateX(-500px) translateY(-275px);
}
52% {
transform: rotateZ(-180deg) scale3d(1.0, 1.0, 1.00) translateZ(25px) translateX(-500px) translateY(-200px);
}
54% {
transform: rotateZ(-180deg) scale3d(1.0, 1.0, 0.75) translateZ(25px) translateX(-500px) translateY(-200px);
}
56% {
transform: rotateZ(-180deg) scale3d(1.0, 1.0, 1.25) translateZ(75px) translateX(-500px) translateY(-125px);
}
58% {
transform: rotateZ(-180deg) scale3d(1.0, 1.0, 1.00) translateZ(25px) translateX(-500px) translateY(-50px);
}
60% {
transform: rotateZ(-180deg) scale3d(1.0, 1.0, 1.00) translateZ(25px) translateX(-500px) translateY(-50px);
}
62% {
transform: rotateZ(-270deg) scale3d(1.0, 1.0, 1.00) translateZ(25px) translateY(-500px) translateX(-0px);
}
64% {
transform: rotateZ(-270deg) scale3d(1.0, 1.0, 0.75) translateZ(25px) translateY(-500px) translateX(-0px);
}
66% {
transform: rotateZ(-270deg) scale3d(1.0, 1.0, 1.25) translateZ(75px) translateY(-425px) translateX(-0px);
}
68% {
transform: rotateZ(-270deg) scale3d(1.0, 1.0, 1.00) translateZ(25px) translateY(-350px) translateX(-0px);
}
70% {
transform: rotateZ(-270deg) scale3d(1.0, 1.0, 0.75) translateZ(25px) translateY(-350px) translateX(-0px);
}
72% {
transform: rotateZ(-270deg) scale3d(1.0, 1.0, 1.25) translateZ(75px) translateY(-275px) translateX(-0px);
}
74% {
transform: rotateZ(-270deg) scale3d(1.0, 1.0, 1.00) translateZ(25px) translateY(-200px) translateX(-0px);
}
76% {
transform: rotateZ(-270deg) scale3d(1.0, 1.0, 0.75) translateZ(25px) translateY(-200px) translateX(-0px);
}
78% {
transform: rotateZ(-270deg) scale3d(1.0, 1.0, 1.25) translateZ(75px) translateY(-125px) translateX(-0px);
}
80% {
transform: rotateZ(-270deg) scale3d(1.0, 1.0, 1.00) translateZ(25px) translateY(-50px) translateX(-0px);
}
82% {
transform: rotateZ(-360deg) scale3d(1.0, 1.0, 1.00) translateZ(25px) translateY(0px) translateX(-0px);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Cube Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="perspective">
<div class="cube">
<div class="cube__face cube__face--front"></div>
<div class="cube__face cube__face--back"></div>
<div class="cube__face cube__face--right"></div>
<div class="cube__face cube__face--left"></div>
<div class="cube__face cube__face--top"></div>
<div class="cube__face cube__face--bottom"></div>
</div>
</div>
</body>
</html>
我认为变换原点引起了问题，因为您试图同时平移和旋转。在你的立方体周围添加一个额外的包装。然后，将您的翻译应用于外部 div，并将您的旋转应用于您的内部 div。
为了便于说明，我稍微简化了您的示例，但您会明白的：
.perspective {
background: gray;
background-size: 50px 50px;
height: 500px;
left: 50%;
position: absolute;
top: 50%;
width: 500px;
transform: translate(-50%, -50%) rotateX(45deg) rotateZ(45deg);
transform-style: preserve-3d;
backface-visibility: hidden;
}
.wrapper {
width: 50px;
height: 50px;
position: relative;
transform: translate3d(0, 0, 25px);
transform-origin: 0 0 0;
transform-style: preserve-3d;
animation: translation 10s forwards;
}
.cube {
width: 50px;
height: 50px;
position: relative;
transform: rotate3d(0, 0, 0);
transform-origin: 25px 25px 0;
transform-style: preserve-3d;
animation: rotation 10s forwards;
}
.cube__face {
position: absolute;
width: 50px;
height: 50px;
background: blue;
}
.cube__face--front {
transform: rotateY( 0deg) translateZ(25px);
background: red;
}
.cube__face--right {
transform: rotateY( 90deg) translateZ(25px);
background: green;
}
.cube__face--back {
transform: rotateY(180deg) translateZ(25px);
background: yellow;
}
.cube__face--left {
transform: rotateY(-90deg) translateZ(25px);
background: pink;
}
.cube__face--top {
transform: rotateX( 90deg) translateZ(25px);
background: purple;
}
.cube__face--bottom {
transform: rotateX(-90deg) translateZ(25px);
background: orange;
}
@keyframes translation {
0% {
transform: translate3d(0, 0, 25px);
}
25% {
transform: translate3d(0, 450px, 25px);
}
50% {
transform: translate3d(450px, 450px, 25px);
}
75% {
transform: translate3d(450px, 0, 25px);
}
100% {
transform: translate3d(0, 0, 25px);
}
}
@keyframes rotation {
0% {
transform: rotateZ(0);
}
25% {
transform: rotateZ(90deg);
}
50% {
transform: rotateZ(180deg);
}
75% {
transform: rotateZ(270deg);
}
100% {
transform: rotateZ(360deg);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Cube Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="perspective">
<div class="wrapper">
<div class="cube">
<div class="cube__face cube__face--front"></div>
<div class="cube__face cube__face--back"></div>
<div class="cube__face cube__face--right"></div>
<div class="cube__face cube__face--left"></div>
<div class="cube__face cube__face--top"></div>
<div class="cube__face cube__face--bottom"></div>
</div>
</div>
</div>
</body>
</html>
你应该让立方体移动简单。我已经调整了立方体的边，以便它们在没有立方体变换的情况下已经就位。
另外，将立方体维度设置为看到的立方体维度，移动中心在其中心。
那么一切就简单多了，立方体动画可以看到
.perspective {
background: gray;
background-size: 50px 50px;
height: 400px;
left: 50%;
position: absolute;
top: 50%;
width: 400px;
transform: translate(-50%, -50%) rotateX(45deg) rotateZ(45deg);
transform-style: preserve-3d;
backface-visibility: hidden;
}
.cube {
width: 50px;
height: 50px;
position: relative;
transform-style: preserve-3d;
animation: test 20s linear forwards;
}
.cube__face {
position: absolute;
width: 50px;
height: 50px;
background: blue;
}
.cube__face--front {
transform: rotateY( 0deg) translateZ(50px);
background: red;
}
.cube__face--right {
transform: translateZ(25px) rotateY(90deg) translateZ(25px);
background: green;
}
.cube__face--back {
transform: translateZ(25px) rotateY(180deg) translateZ(25px);
background: yellow;
}
.cube__face--left {
transform: translateZ(25px) rotateY(-90deg) translateZ(25px);
background: pink;
}
.cube__face--top {
transform: translateZ(25px) rotateX( 90deg) translateZ(25px);
background: purple;
}
.cube__face--bottom {
transform: translateZ(25px) rotateX(-90deg) translateZ(25px);
background: orange;
}
@keyframes test {
0% {
transform: translate(0px 0px);
}
20% {
transform: translate(0px, 350px);
}
30% {
transform: translate(0px, 350px) rotateZ(-90deg);
}
45% {
transform: translate(350px, 350px) rotateZ(-90deg);
}
55% {
transform: translate(350px, 350px) rotateZ(-180deg);
}
70% {
transform: translate(350px, 0px) rotateZ(-180deg);
}
80% {
transform: translate(350px, 0px) rotateZ(-270deg);
}
90% {
transform: translate(0px, 0px) rotateZ(-270deg);
}
100% {
transform: translate(0px, 0px) rotateZ(-360deg);
}
}
<div class="perspective">
<div class="cube">
<div class="cube__face cube__face--front"></div>
<div class="cube__face cube__face--back"></div>
<div class="cube__face cube__face--right"></div>
<div class="cube__face cube__face--left"></div>
<div class="cube__face cube__face--top"></div>
<div class="cube__face cube__face--bottom"></div>
</div>
</div>
我用一个立方体制作了一个简单的动画，它在窗格的边缘周围移动，但在每个角的旋转方式上遇到了问题。对于前两个角，它很好并且旋转平稳，但对于其他角，立方体似乎 'jump' 在它移回原位并继续移动之前。现在我只是在我的转换中使用 rotateZ()。
我试过 transform-origin 之类的东西，但我自己找不到解决方案。我不确定还能做什么，因为我不知道原产地是否有问题，或者是否是尺码问题。我对动画还是新手，所以请原谅任何愚蠢的错误。
请在下面找到代码（HTML 和 CSS 目前为止）。
.perspective {
background: gray;
background-size: 50px 50px;
height: 500px;
left: 50%;
position: absolute;
top: 50%;
width: 500px;
transform: translate(-50%, -50%) rotateX(45deg) rotateZ(45deg);
transform-style: preserve-3d;
-webkit-transform: translate(-50%, -50%) rotateX(45deg) rotateZ(45deg);
-webkit-transform-style: preserve-3d;
backface-visibility: hidden;
}
.cube {
width: 100%;
height: 100%;
position: relative;
transform: scale3d(1.0, 1.0, 1.0) translateZ(25px) translateY(0px) translateX(0px);
transform-origin: 0% 0%;
transform-style: preserve-3d;
animation: test 20s forwards;
}
.cube__face {
position: absolute;
width: 50px;
height: 50px;
background: blue;
}
.cube__face--front {
transform: rotateY( 0deg) translateZ(25px);
background: red;
}
.cube__face--right {
transform: rotateY( 90deg) translateZ(25px);
background: green;
}
.cube__face--back {
transform: rotateY(180deg) translateZ(25px);
background: yellow;
}
.cube__face--left {
transform: rotateY(-90deg) translateZ(25px);
background: pink;
}
.cube__face--top {
transform: rotateX( 90deg) translateZ(25px);
background: purple;
}
.cube__face--bottom {
transform: rotateX(-90deg) translateZ(25px);
background: orange;
}
@keyframes test {
0% {
transform: scale3d(1.0, 1.0, 1.0) translateZ(25px) translateY(0px) translateX(0px);
}
2% {
transform: scale3d(1.0, 1.0, 0.75) translateZ(25px) translateY(0px) translateX(0px);
}
4% {
transform: scale3d(1.0, 1.0, 1.25) translateZ(25px) translateY(75px) translateX(-50px);
}
6% {
transform: scale3d(1.0, 1.0, 1.0) translateZ(25px) translateY(150px) translateX(0px);
}
8% {
transform: scale3d(1.0, 1.0, 0.75) translateZ(25px) translateY(150px) translateX(0px);
}
10% {
transform: scale3d(1.0, 1.0, 1.25) translateZ(25px) translateY(225px) translateX(-50px);
}
12% {
transform: scale3d(1.0, 1.0, 1.0) translateZ(25px) translateY(300px) translateX(0px);
}
14% {
transform: scale3d(1.0, 1.0, 0.75) translateZ(25px) translateY(300px) translateX(0px);
}
16% {
transform: scale3d(1.0, 1.0, 1.25) translateZ(25px) translateY(375px) translateX(-50px);
}
18% {
transform: scale3d(1.0, 1.0, 1.0) translateZ(25px) translateY(450px) translateX(0px);
}
20% {
transform: scale3d(1.0, 1.0, 1.0) translateZ(25px) translateY(450px) translateX(0px);
}
22% {
transform: rotateZ(-90deg) scale3d(1.0, 1.0, 0.75) translateZ(25px) translateX(-500px) translateY(0px);
}
24% {
transform: rotateZ(-90deg) scale3d(1.0, 1.0, 1.25) translateZ(25px) translateX(-450px) translateY(75px);
}
26% {
transform: rotateZ(-90deg) scale3d(1.0, 1.0, 1.0) translateZ(25px) translateX(-500px) translateY(150px);
}
28% {
transform: rotateZ(-90deg) scale3d(1.0, 1.0, 0.75) translateZ(25px) translateX(-500px) translateY(150px);
}
30% {
transform: rotateZ(-90deg) scale3d(1.0, 1.0, 1.25) translateZ(25px) translateX(-450px) translateY(225px);
}
32% {
transform: rotateZ(-90deg) scale3d(1.0, 1.0, 1.0) translateZ(25px) translateX(-500px) translateY(300px);
}
34% {
transform: rotateZ(-90deg) scale3d(1.0, 1.0, 0.75) translateZ(25px) translateX(-500px) translateY(300px);
}
36% {
transform: rotateZ(-90deg) scale3d(1.0, 1.0, 1.25) translateZ(25px) translateX(-450px) translateY(375px);
}
38% {
transform: rotateZ(-90deg) scale3d(1.0, 1.0, 1.0) translateZ(25px) translateX(-500px) translateY(450px);
}
40% {
transform: rotateZ(-90deg) scale3d(1.0, 1.0, 1.0) translateZ(25px) translateX(-500px) translateY(450px);
}
/* X */
42% {
transform: rotateZ(-180deg) scale3d(1.0, 1.0, 0.75) translateZ(25px) translateX(-500px) translateY(-500px);
}
44% {
transform: rotateZ(-180deg) scale3d(1.0, 1.0, 1.25) translateZ(75px) translateX(-500px) translateY(-425px);
}
46% {
transform: rotateZ(-180deg) scale3d(1.0, 1.0, 1.00) translateZ(25px) translateX(-500px) translateY(-350px);
}
48% {
transform: rotateZ(-180deg) scale3d(1.0, 1.0, 0.75) translateZ(25px) translateX(-500px) translateY(-350px);
}
50% {
transform: rotateZ(-180deg) scale3d(1.0, 1.0, 1.25) translateZ(75px) translateX(-500px) translateY(-275px);
}
52% {
transform: rotateZ(-180deg) scale3d(1.0, 1.0, 1.00) translateZ(25px) translateX(-500px) translateY(-200px);
}
54% {
transform: rotateZ(-180deg) scale3d(1.0, 1.0, 0.75) translateZ(25px) translateX(-500px) translateY(-200px);
}
56% {
transform: rotateZ(-180deg) scale3d(1.0, 1.0, 1.25) translateZ(75px) translateX(-500px) translateY(-125px);
}
58% {
transform: rotateZ(-180deg) scale3d(1.0, 1.0, 1.00) translateZ(25px) translateX(-500px) translateY(-50px);
}
60% {
transform: rotateZ(-180deg) scale3d(1.0, 1.0, 1.00) translateZ(25px) translateX(-500px) translateY(-50px);
}
62% {
transform: rotateZ(-270deg) scale3d(1.0, 1.0, 1.00) translateZ(25px) translateY(-500px) translateX(-0px);
}
64% {
transform: rotateZ(-270deg) scale3d(1.0, 1.0, 0.75) translateZ(25px) translateY(-500px) translateX(-0px);
}
66% {
transform: rotateZ(-270deg) scale3d(1.0, 1.0, 1.25) translateZ(75px) translateY(-425px) translateX(-0px);
}
68% {
transform: rotateZ(-270deg) scale3d(1.0, 1.0, 1.00) translateZ(25px) translateY(-350px) translateX(-0px);
}
70% {
transform: rotateZ(-270deg) scale3d(1.0, 1.0, 0.75) translateZ(25px) translateY(-350px) translateX(-0px);
}
72% {
transform: rotateZ(-270deg) scale3d(1.0, 1.0, 1.25) translateZ(75px) translateY(-275px) translateX(-0px);
}
74% {
transform: rotateZ(-270deg) scale3d(1.0, 1.0, 1.00) translateZ(25px) translateY(-200px) translateX(-0px);
}
76% {
transform: rotateZ(-270deg) scale3d(1.0, 1.0, 0.75) translateZ(25px) translateY(-200px) translateX(-0px);
}
78% {
transform: rotateZ(-270deg) scale3d(1.0, 1.0, 1.25) translateZ(75px) translateY(-125px) translateX(-0px);
}
80% {
transform: rotateZ(-270deg) scale3d(1.0, 1.0, 1.00) translateZ(25px) translateY(-50px) translateX(-0px);
}
82% {
transform: rotateZ(-360deg) scale3d(1.0, 1.0, 1.00) translateZ(25px) translateY(0px) translateX(-0px);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Cube Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="perspective">
<div class="cube">
<div class="cube__face cube__face--front"></div>
<div class="cube__face cube__face--back"></div>
<div class="cube__face cube__face--right"></div>
<div class="cube__face cube__face--left"></div>
<div class="cube__face cube__face--top"></div>
<div class="cube__face cube__face--bottom"></div>
</div>
</div>
</body>
</html>
我认为变换原点引起了问题，因为您试图同时平移和旋转。在你的立方体周围添加一个额外的包装。然后，将您的翻译应用于外部 div，并将您的旋转应用于您的内部 div。
为了便于说明，我稍微简化了您的示例，但您会明白的：
.perspective {
background: gray;
background-size: 50px 50px;
height: 500px;
left: 50%;
position: absolute;
top: 50%;
width: 500px;
transform: translate(-50%, -50%) rotateX(45deg) rotateZ(45deg);
transform-style: preserve-3d;
backface-visibility: hidden;
}
.wrapper {
width: 50px;
height: 50px;
position: relative;
transform: translate3d(0, 0, 25px);
transform-origin: 0 0 0;
transform-style: preserve-3d;
animation: translation 10s forwards;
}
.cube {
width: 50px;
height: 50px;
position: relative;
transform: rotate3d(0, 0, 0);
transform-origin: 25px 25px 0;
transform-style: preserve-3d;
animation: rotation 10s forwards;
}
.cube__face {
position: absolute;
width: 50px;
height: 50px;
background: blue;
}
.cube__face--front {
transform: rotateY( 0deg) translateZ(25px);
background: red;
}
.cube__face--right {
transform: rotateY( 90deg) translateZ(25px);
background: green;
}
.cube__face--back {
transform: rotateY(180deg) translateZ(25px);
background: yellow;
}
.cube__face--left {
transform: rotateY(-90deg) translateZ(25px);
background: pink;
}
.cube__face--top {
transform: rotateX( 90deg) translateZ(25px);
background: purple;
}
.cube__face--bottom {
transform: rotateX(-90deg) translateZ(25px);
background: orange;
}
@keyframes translation {
0% {
transform: translate3d(0, 0, 25px);
}
25% {
transform: translate3d(0, 450px, 25px);
}
50% {
transform: translate3d(450px, 450px, 25px);
}
75% {
transform: translate3d(450px, 0, 25px);
}
100% {
transform: translate3d(0, 0, 25px);
}
}
@keyframes rotation {
0% {
transform: rotateZ(0);
}
25% {
transform: rotateZ(90deg);
}
50% {
transform: rotateZ(180deg);
}
75% {
transform: rotateZ(270deg);
}
100% {
transform: rotateZ(360deg);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Cube Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="perspective">
<div class="wrapper">
<div class="cube">
<div class="cube__face cube__face--front"></div>
<div class="cube__face cube__face--back"></div>
<div class="cube__face cube__face--right"></div>
<div class="cube__face cube__face--left"></div>
<div class="cube__face cube__face--top"></div>
<div class="cube__face cube__face--bottom"></div>
</div>
</div>
</div>
</body>
</html>
你应该让立方体移动简单。我已经调整了立方体的边，以便它们在没有立方体变换的情况下已经就位。
另外，将立方体维度设置为看到的立方体维度，移动中心在其中心。
那么一切就简单多了，立方体动画可以看到
.perspective {
background: gray;
background-size: 50px 50px;
height: 400px;
left: 50%;
position: absolute;
top: 50%;
width: 400px;
transform: translate(-50%, -50%) rotateX(45deg) rotateZ(45deg);
transform-style: preserve-3d;
backface-visibility: hidden;
}
.cube {
width: 50px;
height: 50px;
position: relative;
transform-style: preserve-3d;
animation: test 20s linear forwards;
}
.cube__face {
position: absolute;
width: 50px;
height: 50px;
background: blue;
}
.cube__face--front {
transform: rotateY( 0deg) translateZ(50px);
background: red;
}
.cube__face--right {
transform: translateZ(25px) rotateY(90deg) translateZ(25px);
background: green;
}
.cube__face--back {
transform: translateZ(25px) rotateY(180deg) translateZ(25px);
background: yellow;
}
.cube__face--left {
transform: translateZ(25px) rotateY(-90deg) translateZ(25px);
background: pink;
}
.cube__face--top {
transform: translateZ(25px) rotateX( 90deg) translateZ(25px);
background: purple;
}
.cube__face--bottom {
transform: translateZ(25px) rotateX(-90deg) translateZ(25px);
background: orange;
}
@keyframes test {
0% {
transform: translate(0px 0px);
}
20% {
transform: translate(0px, 350px);
}
30% {
transform: translate(0px, 350px) rotateZ(-90deg);
}
45% {
transform: translate(350px, 350px) rotateZ(-90deg);
}
55% {
transform: translate(350px, 350px) rotateZ(-180deg);
}
70% {
transform: translate(350px, 0px) rotateZ(-180deg);
}
80% {
transform: translate(350px, 0px) rotateZ(-270deg);
}
90% {
transform: translate(0px, 0px) rotateZ(-270deg);
}
100% {
transform: translate(0px, 0px) rotateZ(-360deg);
}
}
<div class="perspective">
<div class="cube">
<div class="cube__face cube__face--front"></div>
<div class="cube__face cube__face--back"></div>
<div class="cube__face cube__face--right"></div>
<div class="cube__face cube__face--left"></div>
<div class="cube__face cube__face--top"></div>
<div class="cube__face cube__face--bottom"></div>
</div>
</div>