<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title>Transform</title>
<style type="text/css">
.test-box{
width:600px
margin:50px auto}
.pic{
-webkit-transition:all 1s ease-in-out
transition:all 1s ease-in-out
cursor:pointer}
.top-pic{
position:absolute
transform:scale(0,0)}
.test-box:hover .top-pic{
-webkit-transform-origin:top right
-webkit-transform:scale(1,1)}
.test-box:hover .bot-pic{
-webkit-transform:scale(0,0)
-webkit-transform-origin:bottom left
opacity: .5
-webkit-transform:rotate(120deg)
-webkit-transform-origin:bottom left
}
</style>
</head>
<body>
<div class="test-box">
<img class="pic top-pic" src="test-pic01.jpg" />
<img class="pic bot-pic" src="test-pic02.jpg" />
</div>
</body>
</html>
随便写了几个效果，没有用到JS，不过要用到JS只要把触发事件替换掉上面的hover就行了，比如：
$(".button").click(function () {
。。。
})
这里面用到CSS3，所以请不要用IE11以下的低版本浏览器，不然你啥都看不见
亲，直接打开浏览器查看不就可以了，或者使用DreamWeaver的视图功能，不过很多时候可能不准确，在不同的浏览器下一边编辑html+css+js一边用不同的浏览器打开进行浏览，这是最准确的这些文件是网站的服务器发送给浏览器的,肯定不会在本地找到,不过有解决方案,如果你用的火狐浏览器并且安装的firebug插件,通过F12,然后找到这些文件的内容复制下来,你自己创建CCS和JS
