* { margin:0; padding:0; list-style:none; } .container { margin:0 auto; } .clearfix::before,.clearfix::after { content:"."; height:0; line-height:0; display:block; visibility:hidden; clear:both; } .clearfix::after { clear:both; } .clearfix { *zoom:1; /*IE/7/6 */ } .wrap { margin-top:20px; width:680px; } .wrap ul { padding:10px; } .wrap ul li { position:relative; float:left; width:200px; height:200px; z-index:1; margin:10px; overflow:hidden; } .wrap ul li div { position:absolute; top:0px; left:0px; width:200px; z-index:-1; height:200px; transition:transform 0.3s; transform-origin:left bottom; transform:rotateZ(-90deg); } .wrap ul img { width:100%; height:100%; } .wrap ul li div.back_left { transform:rotateZ(0deg); z-index:2; } .wrap ul li div.back_right { transform-origin:right top; transform:rotateZ(0deg); z-index:2; } .wrap ul li div.back_top { transform-origin:left top; transform:rotateZ(0deg); z-index:2; } .wrap ul li div.back_bottom { transform-origin:right bottom; transform:rotateZ(0deg); z-index:2; }
将一个图片分为四份,确定鼠标在那个方位移入,判断其移入方向为其添加相应的类名,兼容老ie,等主流浏览器,代码中有详细注释