html - CSS 动画的问题

Question

http://codepen.io/Feners4/pen/KggAwg

我希望立方体保持原位并绕轴旋转 360 度。我的立方体确实绕轴 360 度旋转。但是动画变得很疯狂，立方体也移动了位置。如何让它们原地旋转？

我的 CSS:

@red: rgb(131, 168, 226);
@size: 100px;
body {
  background-color: #dff;
}

header {
  text-align: center;
}

h1 {
  text-align: center;
  padding: 9px;
}

.wrap {
  perspective: 1000px;
  perspective-origin: 46% 70px;
}

.cube {
  position: relative;
  width: 200px;
  transform-style: preserve-3d;
  animation: spin 10s linear infinite;
  animation-play-state: paused; 
  animation-direction: alternate;
}

.cube div {
  border: 10;
  border-style: solid;
  border-color: rgb(173, 222, 247);
  opacity: .5;
  position: absolute;
  left: 100px;
  width: 200px;
  height: 200px;
}
.cube:hover {
  animation-play-state: running;
}
@keyframes spin {
  5% {
    transform: rotateY(360deg);
  }
}

.back {
  border: 5px solid @red;
  outline-style: single;
  background: @red;
  transform: translateZ(-100px) rotateY(180deg);
}

.right {
  opacity: 0.50;
  border: 5px solid @red;
  outline-style: single;
  background: @red;
  transform: rotateY(-270deg) translateX(87px);
  transform-origin: top right;
}

.left {
  opacity: 0.50;
  border: 5px solid @red;
  outline-style: single;
  background: @red;
  transform: rotateY(270deg) translateX(-100px);
  transform-origin: center left;
}

.top {
  opacity: 0.50;
  background: @red;
  transform: rotateX(-90deg) translateY(-109px);
  transform-origin: top center;
}

.bottom {
  opacity: 50;
  border: 5px solid @red;
  outline-style: single;
  background: @red;
  transform: rotateX(90deg) translateY(109px);
  transform-origin: bottom center;
}

.front {
  text-align: center;
  color: rgb(173, 222, 247);
  opacity: 0.50;
  border: 2px solid @red;
  outline-style: single;
  background: @red;
  transform: translateZ(109px);
}

.wrap2 {
  perspective: 1000px;
  perspective-origin: 40% 70px;
}

.cube2 {
  position: relative;
  width: 100px;
  transform-style: preserve-3d;
  animation: spin 10s linear infinite;
  animation-play-state: paused; 
  animation-direction: alternate;
}

.cube2 div {
  border: 10;
  border-style: solid;
  border-color: rgb(173, 222, 247);
  opacity: .5;
  position: absolute;
  left: 500px;
  width: 200px;
  height: 200px;
}

.cube2:hover {
  animation-play-state: running;
}

.back2 {
  border: 5px solid @red;
  outline-style: single;
  background: @red;
  transform: translateZ(-100px) rotateY(180deg);
}

.right2 {
  opacity: 0.50;
  border: 5px solid @red;
  outline-style: single;
  background: @red;
  transform: rotateY(-90deg) translateX(87px);
  transform-origin: top right;
}

.left2 {
  opacity: 0.50;
  border: 5px solid @red;
  outline-style: single;
  background: @red;
  transform: rotateY(90deg) translateX(-100px);
  transform-origin: center left;
}

.top2 {
  opacity: 0.50;
  background: @red;
  transform: rotateX(-90deg) translateY(-109px);
  transform-origin: top center;
}

.bottom2 {
  opacity: 50;
  border: 5px solid @red;
  outline-style: single;
  background: @red;
  transform: rotateX(90deg) translateY(109px);
  transform-origin: bottom center;
}

.front2 {
  text-align: center;
  opacity: 0.50;
  color: rgb(173, 222, 247);
  border: 2px solid @red;
  outline-style: single;
  background: @red;
  transform: translateZ(109px);
}

.wrap3 {
  perspective: 1000px;
  perspective-origin: 110% 70px;
}

.cube3 {
  position: relative;
  width: 200px;
  transform-style: preserve-3d;
  animation: spin 10s linear infinite;
  animation-play-state: paused; 
  animation-direction: alternate;
}

.cube3 div {
  border: 10;
  border-style: solid;
  border-color: rgb(173, 222, 247);
  opacity: .5;
  position: absolute;
  left: 999px;
  width: 200px;
  height: 200px;
}

.cube3:hover {
  animation-play-state: running;
}

.back3 {
  border: 5px solid @red;
  outline-style: single;
  background: @red;
  transform: translateZ(-110px) rotateY(180deg);
}

.right3 {
  opacity: 0.50;
  border: 5px solid @red;
  outline-style: single;
  background: @red;
  transform: rotateY(-95deg) translateX(110px);
  transform-origin: top right;
}

.left3 {
  opacity: 0.50;
  border: 5px solid @red;
  outline-style: single;
  background: @red;
  transform: rotateY(-270deg) translateX(-90px);
  transform-origin: center left;
}

.top3 {
  opacity: 0.50;
  background: @red;
  transform: rotateX(-90deg) translateY(-95px);
  transform-origin: top center;
}

.bottom3 {
  opacity: 50;
  border: 5px solid @red;
  outline-style: single;
  background: @red;
  transform: rotateX(92deg) translateY(109px);
  transform-origin: bottom center;
}

.front3 {
  text-align: center;
  color: rgb(173, 222, 247);
  opacity: 0.50;
  border: 2px solid @red;
  outline-style: single;
  background: @red;
  transform: translateZ(99px);
}

.change-color {
  color: #fff;
  background-color: #f45642;
  cursor: pointer;
}

.change-color:hover,
.change-color:focus,
.change-color:active {
  color: #fff;
  background-color: #f45642;
  cursor: pointer;
}

Answer 1

我以前从未研究过转换，但我尝试了一下，

在查看了您的 css 之后，我认为 .wrap 类应该具有 left 和 position 属性，因此添加了这些属性，并从 left 中删除了 .cube div 属性

我已经修改了你的代码

.wrap3 {
  perspective: 1000px;
  perspective-origin: 110% 70px;
}

.cube3 div {
  border: 10;
  border-style: solid;
  border-color: rgb(173, 222, 247);
  opacity: .5;
  position: absolute;
  left: 999px;
  width: 200px;
  height: 200px;
}

到

.wrap3 {
  perspective: 1000px;
  perspective-origin: 110% 70px;
  position: absolute; // added position and left
  left: 999px;
}

.cube3 div {
  border: 10;
  border-style: solid;
  border-color: rgb(173, 222, 247);
  opacity: .5;
  position: absolute; // kept the position of its child tags, but removed left attribute
  width: 200px;
  height: 200px;
}

Updated:

对于疯狂旋转修复，更改下面的代码

这里你没有提到0%的时间，动画要做什么，所以它变得疯狂，在达到5%的时间(0.5秒)后，它开始沿y轴旋转360

@keyframes spin {
  5% {
    transform: rotateY(360deg);
  }
}

到

@keyframes spin {
      0% {
        transform: rotateY(360deg);
      }
    }

我改成0%，所以从头到尾会沿y轴旋转360度。

对于第二个框旋转问题，我没有深入研究，因为大多数类都是多余的，所以我删除了所有这些类。

@red: rgb(131, 168, 226);
@size: 100px;
body {
  background-color: #dff;
}

header {
  text-align: center;
}

h1 {
  text-align: center;
  padding: 9px;
}



.wrap {
  perspective: 1000px;
  perspective-origin: 46% 70px;
  left: 100px;
  position: absolute;
}

.wrap2 {
  perspective: 1000px;
  perspective-origin: 40% 70px;
  position: absolute;
  left: 500px;
}

.wrap3 {
  perspective: 1000px;
  perspective-origin: 110% 70px;
  position: absolute;
  left: 999px;
}

.cube {
  position: relative;
  width: 200px;
  transform-style: preserve-3d;
  animation: spin 10s linear infinite;
  animation-play-state: paused; 
  animation-direction: alternate;
}

.cube div {
  border: 10;
  border-style: solid;
  border-color: rgb(173, 222, 247);
  opacity: .5;
  position: absolute;
  width: 200px;
  height: 200px;
}
.cube:hover {
  animation-play-state: running;
}

@keyframes spin {
  0% {
    transform: rotateY(360deg);
  }
}

.back {
  border: 5px solid @red;
  outline-style: single;
  background: @red;
  transform: translateZ(-100px) rotateY(180deg);
}

.right {
  opacity: 0.50;
  border: 5px solid @red;
  outline-style: single;
  background: @red;
  transform: rotateY(-270deg) translateX(87px);
  transform-origin: top right;
}

.left {
  opacity: 0.50;
  border: 5px solid @red;
  outline-style: single;
  background: @red;
  transform: rotateY(270deg) translateX(-100px);
  transform-origin: center left;
}

.top {
  opacity: 0.50;
  background: @red;
  transform: rotateX(-90deg) translateY(-109px);
  transform-origin: top center;
}

.bottom {
  opacity: 50;
  border: 5px solid @red;
  outline-style: single;
  background: @red;
  transform: rotateX(90deg) translateY(109px);
  transform-origin: bottom center;
}

.front {
  text-align: center;
  color: rgb(173, 222, 247);
  opacity: 0.50;
  border: 2px solid @red;
  outline-style: single;
  background: @red;
  transform: translateZ(109px);
}

.change-color {
  color: #fff;
  background-color: #f45642;
  cursor: pointer;
}

.change-color:hover,
.change-color:focus,
.change-color:active {
  color: #fff;
  background-color: #f45642;
  cursor: pointer;
}

example