Css 沿Y方向旋转

尝试使徽标沿Y方向旋转，以便：

@keyframes rotateLogo {
  0% {
    transform: rotateY(0deg)
  }
  // 50% {
  //   transform: rotateY(180deg)
  // }
  100% {
    transform: rotateY(360deg)
  }
}

.splashAnimation{
  animation-name: rotateLogo;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

然而，它最终看起来是这样的：

[see here]

感谢阅读，我将发布一个jsbin，但我想这是一个已知的问题

JSBIN：

---

---

编辑：这似乎是由于一种视错觉而发生的。有没有办法在旋转中提供透视图，以便向大脑提供一些线索，使其将旋转视为单向的？

我觉得没问题，只要确保从CSS中删除注释（或者使用

/*

和

*/

。注意

/

在CSS中不是有效的注释

.demo{
背景：url（'https://source.unsplash.com/random');
背景尺寸：封面；
宽度：50px；
高度：50px；
}
.Splash动画{
动画名称：rotateLogo；
动画持续时间：3s；
动画迭代次数：无限；
动画计时功能：线性；
}
@旋转的关键帧{
0% {
变换：旋转（0度）
}
100% {
变换：旋转（360度）
}
}

您可以这样使用：

[see here]

---

您需要将透视图添加到徽标的父元素中，以获得“3d”效果，如下所示：

正文{
透视图：800px；
背景色：#eee；
}
@旋转的关键帧{
0% {
变换：旋转（0度）
}
100% {
变换：旋转（360度）
}
}
.Splash动画{
动画名称：rotateLogo；
动画持续时间：3s；
动画迭代次数：无限；
/*动画计时功能：线性*/
}

它在这里起作用。。

这里要提到两件事

问题 正如人们所提到的，由于缺乏视觉提示，即使在软件层面上一切正常，但软件层面（大脑）无法理解图标的转向

势解

---

一个解决方法是在你的变换中添加透视图，这会稍微扭曲你的徽标，但会为你的大脑提供足够的信息来正确感知旋转。透视图的数量是每件事情一个，在我的例子中是150px。记住，透视值越低，效果越强烈。

如果是这样的话似乎没问题，最好添加注释…或标记为无法再重现的问题。这不好，但是：/，动画与许多问题相反times@GeorgeAvgoustis请解释一下。这个“方向”完全取决于你的大脑是如何看待它的。它只是在收缩，然后又在增长，没有真正的旋转“方向”。我在上面加了一个gifillustrate@GeorgeAvgoustis这和他的答案完全一样。（对我来说，他们两人有时都会转向另一个方向，那只是我们的大脑）

有些时候似乎有效，有些时候则无效

？请包括所有相关的代码，包括HTML，以及任何其他可能与您目前使用的CSS规则相冲突的CSS规则。我认为您遇到了：因为您使用的是2D变换并沿y轴旋转，所以没有视觉深度提示这个方向实际上是旋转的。换句话说，你的代码中没有什么固有的缺陷，只是你的思维在捉弄你。我投票把这个问题作为离题题来结束，因为这是由于缺乏3D深度而产生的人类视觉错觉，而不是代码中的错误。这不一定是：你读过维基百科吗我链接的部分？如果旋转舞者是双侧对称的，我会被诅咒的：这不是。就像你的标志一样。它不会在y轴上旋转