css3动画(css3翻转效果)

CSS3动画

经过CSS3，我们能够创立动画，这能够在许多网页中替代动画图片、Flash动画以及JavaScript。
CSS3@keyframes规矩
如需在CSS3中创立动画，您需求学习@keyframes规矩。
@keyframes规矩用于创立动画。在@keyframes中规定某项CSS款式，就能创立由当前款式逐渐改为新款式的动画效果。
@keyframesmyfirst
{
from{background:red;}
to{background:yellow;}
}
@-moz-keyframesmyfirst/*Firefox*/
{
from{background:red;}
to{background:yellow;}
}
@-webkit-keyframesmyfirst/*Safari和Chrome*/
{
from{background:red;}
to{background:yellow;}
}
@-o-keyframesmyfirst/*Opera*/
{
from{background:red;}
to{background:yellow;}
}

css3翻转效果

分析：.container，.flip为了实现动画效果做准备。.front,.back各包裹一张图片。
实现该效果的HTML如下：
<divclass="container">
<divclass="flip">
<divclass="front">
<imgsrc="images/pic00.jpg"alt="">
</div>
<divclass="back">
<imgsrc="images/pic01.jpg"alt="">
</div>
</div>
</div>