CSS3 animate更酷的图片显示效果实例页面

代码：

CSS代码：
.anim_image {
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}
.anim_image_top {
    position: absolute;
    -webkit-transform:scale(1,0);
    opacity: 0;
    filter: Alpha(opacity=0);
}
.anim_box:hover .anim_image_top, .anim_box_hover .anim_image_top {
    opacity: 1;
    filter: Alpha(opacity=100);
    -webkit-transform: scale(1, 1);        
}
.anim_box:hover .anim_image_bottom, .anim_box_hover .anim_image_bottom {
    -webkit-transform:rotate(360deg) scale(0,0);
}
HTML代码：
<div id="testBox" class="demo anim_box">
    <img class="anim_image anim_image_top" src="//image.zhangxinxu.com/image/study/p/s200/ps6.jpg" />
    <img class="anim_image anim_image_bottom" src="//image.zhangxinxu.com/image/study/p/s200/ps4.jpg" />
</div>

效果：