1

こんにちは現在、ホバーしたりクリックしたりせずに一貫して回転させたい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>
4

1 に答える 1

1

これを行うには、CSS3 アニメーションが必要です。(この機能は Safari と Chrome にのみ存在することに注意してください)。次に、反復回数の値を無限に設定します。

ここにデモがあります 

animation-iteration-count:infinite;
-webkit-animation-iteration-count: infinite;
于 2013-08-11T10:15:40.930 に答える