css - 使用 rotateY 旋转图像

Question

我想旋转图像，然后看到了这个视频 https://www.youtube.com/watch?v=nD8xqlh6Esk这提供了一种非常简单的方法来在点击时旋转一个 div。我认为这是在页面加载时使用最少的 css 旋转图像的好方法，因此尝试使用 :after 而不是 :click(720 度)，但这没有用。有没有人使用这种方法来处理页面加载而不是单击？我见过其他方法，但它们需要更多的 CSS。

提供了详细信息

[显然我的 YouTube 链接指向一场足球比赛，但对我来说它指向 LevelUp Tuts CSS 实验 #1 - 卡片翻转效果视频。]

基本上，他通过悬停时的简单变换来翻转卡片，如下所示:

<div class="card"></div>

.card {
  background: blue;
  width: 200px;
  height: 200px;
}
.card:hover {
  transform: rotateY (90deg);
}

因此，您可以在悬停时使用单行、转换来旋转 div。不需要关键帧。

Answer 1

试试这个:

div {
  width: 100px;
  height: 100px;
  background: red;
  animation: spin 2s infinite;
  -webkit-animation: spin 2s infinite;
}
@keyframes spin{
  to{
    transform: rotate(360deg);
  }
}
@-webkit-keyframes spin{
to{
    transform: rotate(360deg);
}

<div id="d"></div>

编辑:这更像您想要的吗？

div {
  width: 100px;
  height: 100px;
  background: red;
  animation: spin 2s forwards;
  -webkit-animation: spin 2s forwards;
}
@keyframes spin{
  to{
    transform: rotateY(90deg);
  }
}
@-webkit-keyframes spin{
to{
    transform: rotateY(90deg);
}
}

<div id="d"><img src="http://img4.wikia.nocookie.net/__cb20120208185721/logopedia/images/5/54/Barclays_Premier_League_logo_(shield).gif" width="100px" height="100px"></div>