图片翻转切换,在不使用CSS3的情况下,一般都是使用JS实现动画,同时操作元素的width和left,或者height和top以模拟翻转的效果,并在适当时候改变src或者z-index实现图片切换。无意中发现CSS3的方案, http://www.webhek.com/css-f ...
图片翻转切换,在不使用CSS3的情况下,一般都是使用JS实现动画,同时操作元素的width和left,或者height和top以模拟翻转的效果,并在适当时候改变src或者z-index实现图片切换。
无意中发现CSS3的方案, http://www.webhek.com/css-flip/ 赶紧学习并总结如下
先上代码(多数照搬自上述链接,有很大兼容问题,小心使用)
HTML:
<div class="flip-container"> <div class="flipper"> <div class="front">here is content : AA</div> <div class="back">here is content : BB</div> </div></div>
原标题:CSS3图片翻转切换案例及其中重要属性解析
关键词:CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。