連續在css中翻轉圖像

-1

我想連續翻轉一個對象我有下面的代碼，但這隻會在懸停時只翻轉一次圖像。我希望圖像在頁面加載後立即開始翻頁並繼續翻頁直到頁面關閉。請幫忙。連續在css中翻轉圖像

CSS：在表示容器與前和後表示圖像的正面和背面側

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

來源

2015-09-20 user2859809

有** [GSAP ]（http://greensock.com/gsap）**，它可以看起來像** [this]（http://jsfiddle.net/rvrvqdsp/）**。 –

使用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>

來源

2015-09-20 08:29:30 MoLow

連續在css中翻轉圖像

回答

相關問題