使用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>

Answer 2

您还需要animation，而不仅仅是transition：

http://jsfiddle.net/rudiedirkx/AB277/95/

神奇之处：

.card {
    animation: spinn 5s linear infinite;
    /* you don't need transition at all */
}
@keyframes spinn {
    0%   { transform: rotateY(0deg); }
    100% { transform: rotateY(720deg); }
}

出于某种原因，Chrome仍然需要前缀。

有关css技巧的更多信息。

Answer 3

这会在css和html加载后立即为对象设置动画：

(http://jsfiddle.net/oemtt7cr/)

    @-webkit-keyframes spin {
      from {
        -webkit-transform: rotateY(0deg);
      }
      to {
        -webkit-transform: rotateY(720deg);
      }
    }
    @keyframes spin {
      from {
        transform: rotateY(0deg);
      }
      to {
        transform: rotateY(720deg);
      }
    }
    .container {
      -webkit-perspective: 2000px;
    }
    .card {
      margin: 20px;
      background: #990;
      width: 200px;
      height: 200px;
      animation: spin 5s ease;
      -webkit-animation: spin 5s ease;
    }

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

Answer 4

如果您喜欢在用户移动光标时开始动画，请使用.card:hover而不是.card:after。

http://jsfiddle.net/AB277/90/

   .card {margin 20px;
        background: blue;
        width: 200px;
        height:200px;
        transition: all 5s;
    }
    .card:hover {
        transform: rotateY(720deg);
    }

或者，如果您喜欢页面加载时的动画，请使用以下脚本。

http://jsfiddle.net/AB277/93/

<div id="card"
</div>
var elm = document.getElementById('card');
elm.classList.add('cardMove');

#card {margin 20px;
    background: blue;
    width: 200px;
    height:200px;
    transition: all 5s;
}
.cardMove {
    transform: rotateY(720deg);        
}