所有轴上的 CSS 步进旋转答案

【问题标题】：CSS Stepped Rotation on All Axes所有轴上的 CSS 步进旋转
【发布时间】：2017-08-03 17:17:42
【问题描述】：

我想要逐步旋转：

绕 Z 轴 180 度；
绕Y轴180度；和
绕 X 轴 180 度。

所以，我已经编写了 CSS：

@keyframes rotate {
  25% { transform: rotateZ(180deg); }
  50% { transform: rotateY(180deg); }
  75% { transform: rotateX(180deg); }
}
.content {
  animation-name: rotate;
  animation-duration: 9s;
}

但是，我似乎无法管理它。第一次旋转 (Z) 有效，但 2. 看起来它是围绕 X 轴而不是 Y 轴旋转。第三次轮换，嗯，这很奇怪。

请有人向我解释我做错了什么以及如何解决它？

【问题讨论】：

标签： css css-animations

【解决方案1】：

你在尝试这个吗？您应该保持其他轮换直到结束。

@keyframes rotate {
  33% { transform: rotateZ(180deg); }
  66% { transform: rotateZ(180deg) rotateY(180deg); }
  100% { transform: rotateZ(180deg) rotateY(180deg) rotateX(180deg); }
}
.content {
  animation-name: rotate;
  animation-duration: 9s;
  width: 45px;
  height: 45px;
  background-color: red;
  position: relative;
}

.content div{
  position: absolute;
}
.content div:nth-child(1){
  width: 45px;
  height: 10px;
  background-color: green;
  top: 0;
}
.content div:nth-child(2){
  width: 10px;
  height: 45px;
  background-color: blue;
  left: 0;
}
.content div:nth-child(3){
  width: 45px;
  height: 10px;
  background-color: yellow;
  bottom:0;
}

.content div:nth-child(4){
  width: 10px;
  height: 35px;
  background-color: orange;
  right:0;
  bottom: 0;
}

<div class="content">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

【讨论】：

谢谢！我运行了代码 sn-p，但它仍然无法正常工作 - 在 IE11 或 Edge40 中。然后我认为“也许 MS 实现（3D 旋转）不是最好的”，所以我在 Chrome59 中对其进行了测试，它的工作方式与我想要/预期的一样。我认为 MS 问题可能与 Gimbal Lock 有关，但我正在努力绕过那台 ATM，所以我不能确定。无论哪种方式，Edge 都是 gimp。