连续翻转css中的图像

Question

我想连续翻转一个对象，我有以下代码，但这只会在悬停时翻转图像，而且只会翻转一次。我希望图像在页面加载后立即开始翻转并继续翻转直到页面关闭。请帮忙。

CSS：in表示容器，front和back表示图片的正反面

.in{

    /* How pronounced should the 3D effects be */
    perspective: 800px;
    -webkit-perspective: 800px;
    position:relative;
}

.front,
.back{

    /* Enable 3D transforms */
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;

    /* We are using two separate divs for the front and back of the
       phone. This will hide the divs when they are flipped, so that the
       opposite side can be seen:  */

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
        position:absolute;



    /* Animate the transitions */
    transition:5.8s;
}

.back{

    /* The back side is flipped 180 deg by default */
    transform:rotateY(180deg);
    -webkit-transform:rotateY(180deg);

    background-position:right center;
}

.in:hover .front{
    /* When the container is hovered, flip the front side and hide it .. */
    transform:rotateY(180deg);
    -webkit-transform:rotateY(180deg);
}

.in:hover .back{
    /* .. at the same time flip the back side into visibility */
    transform:rotateY(360deg);
    -webkit-transform:rotateY(360deg);
}

Answer 1

使用 css animation:

.flip{
  width:100px;
  height:100px;
  margin:30px;
  background:green;  
  -o-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -o-animation:rotate linear 2s infinite;
  -moz-animation:rotate linear 2s infinite;
  -webkit-animation:rotate linear 2s infinite;
  animation:rotate linear 2s infinite;
}

@-o-keyframes rotate{ from { -o-transform: rotateY(0deg) } to { -o-transform: rotateY(360deg) } }
@-moz-keyframes rotate{ from { -moz-transform: rotateY(0deg) } to { -moz-transform: rotateY(360deg) } }
@-webkit-keyframes rotate{ from { -webkit-transform: rotateY(0deg) } to { -webkit-transform: rotateY(360deg) } }
@keyframes rotate{ from { transform: rotateY(0deg) } to { transform: rotateY(360deg) } }

<div class="flip"></div>