css3网页加载后图片翻转效果代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 css3网页加载后图片翻转效果代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css3网页加载后图片翻转效果代码</title>
<style>
*{ margin:0; padding:0;}
img{ border:0;}
body{ background:#009946;}
.zzsc{ padding:10% 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);} 
}
</style>
</head>
<body>
<div class="zzsc">
	<img src="images/zzsc01.jpg" class="rotates rotatesimg" />
    <img src="images/zzsc02.jpg" class="rotates rotatesimg" />
    <img src="images/zzsc03.jpg" class="rotates rotatesimg" />
    <img src="images/zzsc04.jpg" class="rotates rotatesimg" />
    <img src="images/zzsc05.jpg" class="rotates rotatesimg" />
</div>
</body>
</html>

附件:下载该文件资源,减少时间成本(增值服务)