答案 0 :(得分:1)
CSS3提供了animate
,您可以在此处找到有关如何使用此功能的some nice intro。
以下是我的一个使用两个类flipH
和flipV
的示例,应用于父元素将知道如何处理子card
元素。<登记/>
仔细查看CSS以正确设置背面并获得悬停使用的线索(如果需要)
过渡但主要是 - 交替的动画:
/* ::: HOLDER, CARD, FACES */
.holder {
display: inline-block;
width: 64px;
height: 64px;
perspective: 700px;
}
.card, .front, .back{
position: absolute;
height: inherit;
width: inherit;
transition: all .7s;
transform-style: preserve-3d;
backface-visibility: hidden;
}
/* ::: FACES */
.front{background: tomato;}
.back{background: slategray;}
/* ::: SETUP FACES */
.flipH .back{transform: rotateY(-180deg);}
.flipV .back{transform: rotateX(180deg);}
/* ::: HOVER EFFECTS (Remove Automated for this to work) */
.flipH:hover .card{ transform: rotateY(180deg); }
.flipV:hover .card{ transform: rotateX(-180deg); }
/* ::: AUTOMATED EFFECTS */
.flipH .card{
animation: flipH 2s 0s infinite alternate ease-in-out;
-webkit-animation: flipH 2s 0s infinite alternate ease-in-out;
}
.flipV .card{
animation: flipV 2s 0s infinite alternate ease-in-out;
-webkit-animation: flipV 2s 0s infinite alternate ease-in-out;
}
@keyframes flipH {
0% { transform: rotateY(0deg); }
100% { transform: rotateY(-180deg); }
}
@-webkit-keyframes flipH {
0% { transform: rotateY(0deg); }
100% { transform: rotateY(-180deg); }
}
@keyframes flipV {
0% { transform: rotateX(0deg); }
100% { transform: rotateX(-180deg); }
}
@-webkit-keyframes flipV {
0% { transform: rotateX(0deg); }
100% { transform: rotateX(-180deg); }
}
&#13;
<div class="holder flipH">
<div class="card">
<div class="front">A</div>
<div class="back">B</div>
</div>
</div>
<div class="holder flipV">
<div class="card">
<div class="front">A</div>
<div class="back">B</div>
</div>
</div>
<div class="holder flipH">
<div class="card">
<div class="front"><img src="//i.stack.imgur.com/1ZIkv.jpg?s=64&g=1"></div>
<div class="back"><img src="//i.stack.imgur.com/776st.jpg?s=64&g=1"></div>
</div>
</div>
&#13;