Question

尝试使徽标在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;
}

然而它最终看起来像这样：

https://giphy.com/gifs/g0gEjkRZ5lLI3mLBDo

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

JSBIN：https://jsbin.com/yihoriniso/edit?html,css,output

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

Answer 1

您需要将perspective添加到徽标的父元素中才能获得'3d'感觉，如下所示：

body {
  perspective: 800px;
  background-color: #eee;
}

@keyframes rotateLogo {
  0% {
    transform: rotateY(0deg)
  }
  100% {
    transform: rotateY(360deg)
  }
}

.splashAnimation{
  animation-name: rotateLogo;
  animation-duration: 3s;

  animation-iteration-count: infinite;
  /* animation-timing-function: linear; */
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>it works here..</title>
</head>
<body>
  
  <div class="splashAnimation" style="height:100%;display:flex;align-items:center;justify-content:center">
    <img style="width:100px;height:100px" src="http://brandmark.io/logo-rank/random/beats.png">
  </div>
  

</body>
</html>

Answer 2

对我来说似乎没问题，只需确保从CSS中删除评论（或使用/*和*/。请注意//不是CSS中的有效评论。< / p>

＆＃13;

.demo {
  background:url('https://source.unsplash.com/random');
  background-size:cover;
  width:50px;
  height:50px;
}

.splashAnimation{
  animation-name: rotateLogo;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes rotateLogo {
  0% {
    transform: rotateY(0deg)
  }
  100% {
    transform: rotateY(360deg)
  }
}

＆＃13;

<div class="splashAnimation demo"></div>

＆＃13;

Answer 3

这里要提两件事。

问题

正如人们提到的那样，由于缺乏视觉线索，即使在软件层面上一切正常，但是湿软件层面（大脑）也无法理解图标转向的方向

潜在解决方案

解决方法是在变换中添加perspective，这会稍微扭曲您的徽标，但会为您的大脑提供足够的信息以正确感知旋转。透视量是每个案例的事情，在我的情况下150px工作。请记住，透视值越低，效果越强烈。

Answer 4

您可以这样使用：

[see here]

https://jsfiddle.net/ua50q2jh/2/

沿Y方向旋转css

4 个答案:

问题

潜在解决方案