好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

CSS3动画(3):transform实现multi-flip动画_html/css_WEB-ITn

今天给大家带来自动轮播的multi-flip动画,o(^▽^)o,不知道什么是multi-flip没关系,来张效果图就懂了->

multi-flip2.gif

1.总体思路 有正面7个div,背面7个div,重叠在一起,正面一张图片,背面另外一张图片(如一张纸的正反面画着不同的图画),正面旋转180度后显示背面的图片,并将原本正面div的图片替换成原本背面的div的图片,背面旋转180度,显示正面(此时回到最初的位置状态),一直循环。 简单来说: 正面div旋转,替换,转回,背面div替换成下张图片,以此一直循环下去。(单纯看文字有点难以理解,我们直接来看看“庐山真面目”) 2.HTML: 先看html,有个整体了解。

             

查看更多关于CSS3动画(3):transform实现multi-flip动画_html/css_WEB-ITn的详细内容...

  阅读:34次