javascript - 带关键帧的自动翻转 div

Question

您好，目前我有一个 div，我希望它在无需悬停或单击的情况下始终旋转。这是目前正在运行的 jfiddle。我想让那个 div 始终旋转。 http://jsfiddle.net/CsDLG/1/

h3 {
    font: 22px normal Futura, sans-serif;
    color:#333;
}
#f1_container {
    width:430px;
    height:250px;
    position:relative;
    left:35px;
    top:10px;
    z-index:1;
    -webkit-perspective:1000px;
    -moz-perspective:1000px;
    -o-perspective:1000px;
    perspective:1000px;
    margin:15px;
    }
    #f1_card {
        width:100%;
        height:100%;
        -webkit-transform-style:preserve-3d;
        -webkit-transition:all 1s linear;
        -moz-transform-style:preserve-3d;
        -moz-transition:all 1s linear;
        -o-transform-style:preserve-3d;
        -o-transition:all 1s linear;
        transform-style:preserve-3d;
        transition:all 1s linear;
    }
    #f1_container:hover #f1_card, #f1_container.hover_effect #f1_card {
        -webkit-transform:rotateY(180deg);
        -moz-transform:rotateY(180deg);
        -o-transform:rotateY(180deg);
        transform:rotateY(180deg);
    }
    .face {
        position:absolute;
        width:100%;
        height:100%;
        -webkit-backface-visibility:hidden;
        -moz-backface-visibility:hidden;
        -o-backface-visibility:hidden;
        backface-visibility:hidden;
    }
    .face.back {
        display:block;
        -webkit-transform:rotateY(180deg);
        -webkit-box-sizing:border-box;
        -moz-transform:rotateY(180deg);
        -moz-box-sizing:border-box;
        -o-transform:rotateY(180deg);
        -o-box-sizing:border-box;
        transform:rotateY(180deg);
        box-sizing:border-box;
        color:#f5f5f5;
        text-align:center;
        background-color:#f5f5f5;
        padding:10px;
    }
    .underz {
        background:url(http://farm6.staticflickr.com/5069/5614374365_24c4fd01d2_z.jpg) center bottom;
        width:430px;
        height:250px;
    }





<div id="f1_container">
            <div id="f1_card" class="shadow">
                <div class="front face 1">
                    <div class="underz"></div>
                </div>
                <div class="back face center"><h3>We work while we play and have fun!</h3>
                </div>
            </div>
        </div>

Answer 1

您需要一个 CSS3 动画来执行此操作。 (请记住，此功能仅存在于 Safari 和 Chrome 中)。然后，将迭代计数值设置为无限。

here is a demo

animation-iteration-count:infinite;
-webkit-animation-iteration-count: infinite;