1.png
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
perspective: 1000px; /*透视距离*/
}
p{text-align: center;}
#warp{margin-top: 100px;}
#banner {
width: 300px;
height: 300px;
position: relative;
margin: 0 auto;
transition: all 1s; /*css动画时间(jquery的animate不支持transform只能靠修改css实现动画效果，或者自己封装一个原生的cssTransform)*/
transform-style: preserve-3d; /*父元素设为3d视图*/
transform-origin: 50% 50% -150px; /*3d中心点*/
transform: rotateX(0deg) rotateY(0deg);
}
#banner div {
position: absolute;
width: 300px;
height: 300px;
text-align: center;
line-height: 300px;
opacity: .9;
}
#banner div:nth-child(1) { /*上*/
background: lavender;
top: -300px;
transform-origin: bottom; /*设置旋转位置(沿底部X轴旋转)*/
transform: rotateX(90deg);
}
#banner div:nth-child(2) { /*下*/
background: lightcoral;
top: 300px;
transform-origin: top; /*设置旋转位置(沿顶部X轴旋转)*/
transform: rotateX(-90deg);
}
#banner div:nth-child(3) { /*前(不需要旋转)*/
background: lemonchiffon;
z-index: 99;
}
#banner div:nth-child(4) { /*后*/
background: lightcoral;
transform: translateX(0px) translateZ(-300px) rotatey(180deg); /*设置后面(沿Z轴进深)*/
left: 0;
}
#banner div:nth-child(5) { /*左*/
background: lightcyan;
left: -300px;
transform-origin: right; /*设置旋转位置(沿右边Y轴旋转)*/
transform: rotateY(-90deg);
}
#banner div:nth-child(6) { /*右*/
background: lightgrey;
left: 300px;
transform-origin: left; /*设置旋转位置(沿左边Y轴旋转)*/
transform: rotateY(90deg);
}
</style>
<script type="text/javascript">
$(function(){
var index = 0;
$('#next').on('click',function(){
index++
$('#banner').css({
transform:'rotateX(0deg) rotateY(-'+9*index+'0deg)'
})
})
})
</script>
</head>
<body>
<div id="warp">
<div id="banner">
<div>上</div>
<div>下</div>
<div>前</div>
<div>后</div>
<div>左</div>
<div>右</div>
</div>
<p><button id="next">next</button></p>
</div>
</body>
</html>
网友评论