* {
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,等主流浏览器,代码中有详细注释