CSS Cube 在变换后恢复到初始状态答案

【问题标题】：CSS Cube reverts back to its initial state after transformCSS Cube 在变换后恢复到初始状态
【发布时间】：2015-04-23 11:38:22
【问题描述】：

我不是 css 专家，我遵循了不同的教程资源，以便使用 css 和 html 在悬停时创建一个旋转立方体。

悬停时，立方体平移和旋转。但是，当它不再活动时，我希望立方体回到原来的位置。如何实现？

这里是代码。

HTML

.wrap {
  -webkit-perspective: 800px;
  perspective: 800px;
  -webkit-perspective-origin: 50% 100px;
  perspective-origin: 50% 100px;
  float: left;
  margin-right: 3.5px;
  -webkit-transition: 1s ease-in-out;
  -moz-transition: 1s ease-in-out;
  -o-transition: 1s ease-in-out;
}
.cube {
  position: relative;
  width: 80px;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  margin: 0 auto;
  margin-top: 30px;
  -webkit-animation: spin 3s infinite linear;
  animation: spin 3s infinite linear;
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}
.cube div {
  position: absolute;
  width: 50px;
  height: 50px;
}
.back {
  transform: translateZ(0px) rotateY(180deg);
  background: #057e98;
  opacity: 0.8;
}
.right {
  transform: rotateY(-270deg) translateX(0px);
  transform-origin: top right;
  background: #16a8b8;
  opacity: 0.8;
}
.left {
  transform: rotateY(270deg) translateX(0px);
  transform-origin: center left;
  background: #c25e28;
  opacity: 0.8;
}
.top {
  transform: rotateX(-90deg) translateY(-50px);
  -webkit-transform-origin: top center;
  transform-origin: top center;
  background: #c25e28;
  opacity: 0.8;
}
.bottom {
  transform: rotateX(90deg) translateY(0px);
  transform-origin: bottom center;
  background: blue;
  opacity: 0.8;
}
.front {
  transform: translateZ(50px);
  background: #f47a2d;
  opacity: 0.8;
}
@-webkit-keyframes spin {
  from {
    -webkit-transform: rotateY(0);
    -webkit-transform-origin: 20% 50% 0;
  }
  to {
    -webkit-transform: rotateY(360deg);
    -webkit-transform-origin: 20% 50% 0;
  }
}
.cube:hover {
  -webkit-animation-play-state: running;
  animation-play-state: running;
}
.wrap:hover {
  -webkit-transform: translate(3em, 5em);
}

<div class="wrap">
  <div class="cube text-center">
    <div class="front">
    </div>
    <div class="back">
    </div>
    <div class="top">
    </div>
    <!--<div class="bottom"> 
          </div>-->
    <div class="left">
    </div>
    <div class="right">
    </div>
  </div>
</div>

<div class="wrap">
  <div class="cube text-center">
    <div class="front">
    </div>
    <div class="back">
    </div>
    <div class="top">
    </div>
    <!--<div class="bottom"> 
          </div>-->
    <div class="left">
    </div>
    <div class="right">
    </div>
  </div>
</div>

问题是当立方体停止旋转时，它会保持当前状态。我希望它恢复到原来的位置和状态。也就是说，如果它停止旋转并显示“右侧”，它应该返回到其原始位置并显示“正面”。

【问题讨论】：

类似this?
@jbutler483 是的。虽然如果能从当前状态平稳过渡到初始状态，那就太好了。这可能吗？
不容易。但我认为最近发布了一个关于此的问题......我会看看我是否可以为你挖掘它。像this 这样的东西最终使用了一个额外的类和javascript
@jbutler483 谢谢。我会看看我是否可以将它转移到我的场景中。感谢您的帮助。

标签： html css transform

【解决方案1】：

我认为你需要像下面这样。您必须应用以下 css：

这是因为您在未悬停时暂停了动画animation-play-state: paused;，所以它会停止动画。

.wrap {
     -webkit-perspective: 800px;
        perspective: 800px;
        -webkit-perspective-origin: 50% 100px;
        perspective-origin: 50% 100px;
        float:left;
        margin-right: 3.5px;
        -webkit-transition: 1s ease-in-out;
        -moz-transition: 1s ease-in-out;
        -o-transition: 1s ease-in-out;    
    }

    .cube {
        position: relative;
        width: 80px;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
        margin: 0 auto;
        margin-top: 30px;        
       

    }

    .cube div {
        position: absolute;
        width: 50px;
        height: 50px;
    }

    .back {
        transform: translateZ(0px) rotateY(180deg);
        background: #057e98;
        opacity: 0.8;
    }
    .right {
        transform: rotateY(-270deg) translateX(0px);
        transform-origin: top right;
        background: #16a8b8;
        opacity: 0.8;
    }
    .left {
        transform: rotateY(270deg) translateX(0px);
        transform-origin: center left;
        background: #c25e28;
        opacity: 0.8;
    }
    .top {
        transform: rotateX(-90deg) translateY(-50px);
        -webkit-transform-origin: top center;
        transform-origin: top center;
        background: #c25e28;
        opacity: 0.8;
    }
    .bottom {
        transform: rotateX(90deg) translateY(0px);
        transform-origin: bottom center;
        background: blue;
        opacity: 0.8;
    }
    .front {
        transform: translateZ(50px);
        background: #f47a2d;
        opacity: 0.8;
    }

    @-webkit-keyframes spin {
        from { -webkit-transform: rotateY(0); -webkit-transform-origin: 20% 50% 0; }
        to { -webkit-transform: rotateY(360deg); -webkit-transform-origin: 20% 50% 0;}
    } 

@keyframes spin {
        from { transform: rotateY(0); transform-origin: 20% 50% 0; }
        to { transform: rotateY(360deg); transform-origin: 20% 50% 0;}
    } 

    .cube:hover {  
     -webkit-animation: spin 3s infinite linear;
        animation: spin 3s infinite linear;
        -webkit-animation-play-state: running;
        animation-play-state: running;
    }

    .wrap:hover{
        -webkit-transform: translate(3em,5em);
      transform: translate(3em,5em);
    }

<div class="wrap">
   <div class="cube text-center">
      <div class="front">
      </div>
      <div class="back">
      </div>
      <div class="top">
      </div>
      <!--<div class="bottom"> 
      </div>-->
      <div class="left">
      </div>
      <div class="right">
      </div>
  </div>
</div>

<div class="wrap">
   <div class="cube text-center">
      <div class="front">
      </div>
      <div class="back">
      </div>
      <div class="top">
      </div>
      <!--<div class="bottom"> 
      </div>-->
      <div class="left">
      </div>
      <div class="right">
      </div>
  </div>
</div>

希望对你有帮助。

【讨论】：

是的。这是一种解决方案，但如果能从当前状态平稳过渡到初始状态，那就太好了。
@mokko211：过渡（而不是动画）会导致平滑过渡回原始状态，但恐怕它对您没有用处，因为您需要无限循环。对于动画，反向效果需要反向动画 - 类似于我的 this answer。但这只是在您想要完全逆转事件的情况下。如果你只是想让它顺利返回，我认为 Ketan 的第二个样本对你有好处。
@Harry Ahhh，我明白你的意思了。对于一项小工作来说，这将需要太多的工作。我会坚持 Ketan 的回答。谢谢

【解决方案2】：

您可以创建一个在非 :hover 状态下发生一次的回旋动画，但它会在页面加载一次时发生（在任何事情发生之前）；

你可以让一个 js 监听器在悬停时添加这个动画来解决这个问题......（但那是作弊）......

.wrap {
  -webkit-perspective: 800px;
  perspective: 800px;
  -webkit-perspective-origin: 50% 100px;
  perspective-origin: 50% 100px;
  float: left;
  margin-right: 3.5px;
  -webkit-transition: 1s ease-in-out;
  -moz-transition: 1s ease-in-out;
  -o-transition: 1s ease-in-out;
}
.cube {
  position: relative;
  width: 80px;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  margin: 0 auto;
  margin-top: 30px;
  -webkit-animation: spinback 3s 1 linear;
  animation: spinback 3s 1 linear;

  
}
.cube div {
  position: absolute;
  width: 50px;
  height: 50px;
}
.back {
  transform: translateZ(0px) rotateY(180deg);
  background: #057e98;
  opacity: 0.8;
}
.right {
  transform: rotateY(-270deg) translateX(0px);
  transform-origin: top right;
  background: #16a8b8;
  opacity: 0.8;
}
.left {
  transform: rotateY(270deg) translateX(0px);
  transform-origin: center left;
  background: #c25e28;
  opacity: 0.8;
}
.top {
  transform: rotateX(-90deg) translateY(-50px);
  -webkit-transform-origin: top center;
  transform-origin: top center;
  background: #c25e28;
  opacity: 0.8;
}
.bottom {
  transform: rotateX(90deg) translateY(0px);
  transform-origin: bottom center;
  background: blue;
  opacity: 0.8;
}
.front {
  transform: translateZ(50px);
  background: #f47a2d;
  opacity: 0.8;
}
@-webkit-keyframes spin {
  from {
    -webkit-transform: rotateY(0);
    -webkit-transform-origin: 20% 50% 0;
  }
  to {
    -webkit-transform: rotateY(360deg);
    -webkit-transform-origin: 20% 50% 0;
  }
}
 @-webkit-keyframes spinback {

  from {
    -webkit-transform: rotateY(360deg);
    -webkit-transform-origin: 20% 50% 0;
  }
  to {
    -webkit-transform: rotateY(0);
    -webkit-transform-origin: 20% 50% 0;
  }
}
.cube:hover {
  -webkit-animation: spin 3s infinite linear;
  animation: spin 3s infinite linear;
}
.wrap:hover {
  -webkit-transform: translate(3em, 5em);
}

<div class="wrap">
  <div class="cube text-center">
    <div class="front">
    </div>
    <div class="back">
    </div>
    <div class="top">
    </div>
    <!--<div class="bottom"> 
          </div>-->
    <div class="left">
    </div>
    <div class="right">
    </div>
  </div>
</div>

<div class="wrap">
  <div class="cube text-center">
    <div class="front">
    </div>
    <div class="back">
    </div>
    <div class="top">
    </div>
    <!--<div class="bottom"> 
          </div>-->
    <div class="left">
    </div>
    <div class="right">
    </div>
  </div>
</div>

【讨论】：