推荐一个网页加载后图片翻转效果的CSS3代码

推荐一个网页加载后图片翻转效果的CSS3代码

发布时间：2016-03-04编辑：余斗文件大小：69KB阅读：(0)字号： 大 中 小

　　特效说明：这是一款CSS3网页加载后图片翻转效果代码，基于CSS3属性transform编写简单动画，随简单，但是效果很好的图片翻转效果。请用支持HTML5+CSS3主流浏览器预览效果。(兼容测试：FireFox、Chrome、Safari、Opera等支持HTML5/CSS3浏览器)

　　使用方法：

　　调用CSS样式：


<link rel="stylesheet" type="text/css" href="css/style.css"/>
 

　　CSS代码：



.zzsc{ padding:2% 0; overflow:hidden;}
.zzsc img{width: 18%;margin:1%; border-radius:5px; float:left;}
.zzsc .rotatesimg{-webkit-animation:transform-5 2s ease 500ms alternate none 1;animation:transform-5 2s ease 500ms alternate none 1;}
@-webkit-keyframes transform-5 {
    from{-webkit-transform:perspective(400px) rotateY(180deg);transform:perspective(400px) rotateY(180deg);}
        to{-webkit-transform:perspective(400px) rotateY(0deg);transform:perspective(400px) rotateY(0deg);}
}
@keyframes transform-5 {
    from{-webkit-transform:perspective(400px) rotateY(180deg);transform:perspective(400px) rotateY(180deg);}
        to{-webkit-transform:perspective(400px) rotateY(0deg);transform:perspective(400px) rotateY(0deg);}
}

 

　　
反转效果展示


解压后文件