Html
    Css
    Js

    
                        
* {
	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;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.2.3
 立即下载

判断鼠标移入方向

将一个图片分为四份,确定鼠标在那个方位移入,判断其移入方向为其添加相应的类名,兼容老ie,等主流浏览器,代码中有详细注释

0