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;
    cursor:pointer;
}
.anim_image_top {
    position: absolute;
    -webkit-transform: scale(0, 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);
    -webkit-transform-origin: top right;        
}
.anim_box:hover .anim_image_bottom, .anim_box_hover .anim_image_bottom {
    -webkit-transform: scale(0, 0);
    -webkit-transform-origin: bottom left;
}
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>

效果：