0
我目前有以下HTML和CSS,它可以創建兩個div之間翻轉的效果。CSS3動畫:rotateX翻轉兩個div以上
我如何擴大這個在4(或更多)divs之間翻轉?
我在想這些方法可能是前進的方向,但我不知道如何實現它們!
- 暫停動畫在
rotateX(90deg)
然後開始第二套動畫; - 或更改div的內容時,他們在
rotateX(90deg)
。
HTML
<div class="flip1">
FLIP 1<br />
FLIP 1<br />
FLIP 1<br />
FLIP 1<br />
</div>
<div class="flip2">
FLIP 2<br />
FLIP 2<br />
FLIP 2<br />
FLIP 2<br />
</div>
CSS
div {
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function:linear;
-webkit-backface-visibility: hidden;
color: blue;
font-family: Helvetica,Arial,sans-serif;
font-weight: bold;
padding: 20px;
position: absolute;
}
@-webkit-keyframes flip1 {
from { -webkit-transform: rotateX(0deg); }
to { -webkit-transform: rotateX(360deg); }
}
div.flip1 {
-webkit-animation-name: flip1;
}
@-webkit-keyframes flip2 {
from { -webkit-transform: rotateX(-180deg); }
to { -webkit-transform: rotateX(180deg); }
}
div.flip2 {
-webkit-animation-name: flip2;
}