CSS动画的问题答案

【问题标题】：Problems with CSS AnimationCSS动画的问题
【发布时间】：2016-10-16 04:19:42
【问题描述】：

我希望立方体保持原位并在轴上旋转 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;
}

【问题讨论】：

标签： html css css-animations keyframe

【解决方案1】：

我以前从未做过转换，但我试了一下，

看了你的css后，我认为.wrap类应该有属性left和position所以添加了这些属性，并从.cube div中删除了left属性

我修改了你的代码

.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

【讨论】：

感谢您的回复。你的回答肯定有帮助，但立方体仍然没有留在原地，即使你的方法要好得多。另外，我不知道为什么，当你第一次将鼠标悬停在一个立方体上时，动画变得非常疯狂而且非常快..
*修正...中间的立方体没有留在原地。它从左到右略微移动..
太棒了！感谢您的详细解答。