帶關鍵幀的自動翻轉div

Question

您好，目前我有一個div，我希望它可以持續旋轉而不需要懸停或單擊。 這是目前的工作方式。 我想使該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中存在）。 然后，將迭代計數值設置為無限。

這是一個演示

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