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

1、准备好需要用到的图标。

2、新建html文档。

3、书写hmtl代码。

<div class="aia">

<img src="images/lanren01.jpg" class="rotates rotatesimg" />

    <img src="images/lanren02.jpg" class="rotates rotatesimg" />

    <img src="images/lanren03.jpg" class="rotates rotatesimg" />

    <img src="images/lanren04.jpg" class="rotates rotatesimg" />

    <img src="images/lanren05.jpg" class="rotates rotatesimg" />

</div>

4、书写css代码。

<style>

*{ margin:0; padding:0;}

img{ border:0;}

body{ background:#009946;}

.aia{ padding:10% 0; overflow:hidden;}

.aia img{width: 18%;margin:1%; border-radius:5px; float:left;}

.aia .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>

5、代码整体结构。

6、查看效果。