Question

我想旋转图像，我看到了这段视频https://www.youtube.com/watch?v=nD8xqlh6Esk，它提供了一种非常简单的方法来点击一个div。我认为这将是一个很好的方法来在页面加载上使用最小的css旋转图像所以尝试使用：after而不是a：click（720度）但是没有用。有没有人有这种方法来处理页面加载而不是点击？我已经看过其他方法，但他们需要更多的CSS。

提供详情

[显然我的youtube链接是一场足球比赛，虽然对我而言，它是LevelUp Tuts CSS Experiments＃1 - Card Flipping Effect视频。]

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

<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仍需要前缀。

More info on css-tricks.

Answer 3

一旦css和html加载，它就会激活对象：

（http://jsfiddle.net/oemtt7cr/）

＆＃13;

    @-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;
    }

＆＃13;

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

＆＃13;

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);        
}

使用rotateY旋转图像

4 个答案: