3D旋转木马 点击图片切换 轮播图
2016-11-23 本文已影响0人
Lamport
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>cube</title>
<style>
*{margin: 0;padding:0;}
body{
background:#ccc;
-webkit-perspective:1200px;
}
#box{
-webkit-transform-style: preserve-3d ;
height: 300px;
width: 300px;
margin: 150px auto;
position: relative;
-webkit-animation:rotate 10s linear infinite;
}
.cubeDiv{
position: absolute;
left: 0px;
top: 0px;
height: 300px;
width: 300px;
opacity: .8;
}
#box div:nth-child(1){
background:url("http://img1.imgtn.bdimg.com/it/u=4056923687,289729662&fm=21&gp=0.jpg") no-repeat;
background-size:100%;
-webkit-transform:translateZ(150px);
}
#box div:nth-child(2){
background:url("http://img4.imgtn.bdimg.com/it/u=3523325323,1275598537&fm=21&gp=0.jpg") no-repeat;
background-size:100%;
-webkit-transform:translateZ(-150px);
}
#box div:nth-child(3){
background:url("http://img1.imgtn.bdimg.com/it/u=3962190270,1205216237&fm=21&gp=0.jpg") no-repeat;
background-size:100%;
-webkit-transform:rotateX(90deg) translateZ(150px);
}
#box div:nth-child(4){
background:url("http://img0.imgtn.bdimg.com/it/u=4203527507,1663803935&fm=21&gp=0.jpg") no-repeat;
background-size:100%;
-webkit-transform:rotateX(-90deg) translateZ(150px);
}
#box div:nth-child(5){
background:url("http://img2.imgtn.bdimg.com/it/u=3238837003,3004646513&fm=21&gp=0.jpg") no-repeat;
background-size:100%;
-webkit-transform:rotateY(90deg) translateZ(150px);
}
#box div:nth-child(6){
background:url("http://img2.imgtn.bdimg.com/it/u=3829896007,3011643329&fm=21&gp=0.jpg") no-repeat;
background-size:100%;
-webkit-transform:rotateY(-90deg) translateZ(150px);
}
@-webkit-keyframes rotate{
0%{
-webkit-transform:rotateY(0deg) rotateX(0deg);
}
100%{
-webkit-transform:rotateY(360deg) rotateX(360deg);
}
}
@-webkit-keyframes rotate2{
0%{
-webkit-transform:rotateY(0deg);
}
100%{
-webkit-transform:rotateY(360deg);
}
}
</style>
</head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<body>
<div id = "box">
<div class = "cubeDiv"></div>
<div class = "cubeDiv"></div>
<div class = "cubeDiv"></div>
<div class = "cubeDiv"></div>
<div class = "cubeDiv"></div>
<div class = "cubeDiv"></div>
</div>
</body>
<script>
var flag = true;
$(document).ready(function(){
$(".cubeDiv").click(function(){
if(flag){
$("#box").css({
"animation" : "rotate2 10s linear infinite"
})
$(".cubeDiv").eq(0).css({
"transform":"translateZ(300px)",
})
$(".cubeDiv").eq(1).css({
"transform":"translateZ(300px) rotateY(60deg)",
"transform-origin":"0 0 ",
"left":"350px",
})
$(".cubeDiv").eq(2).css({
"transform":"translateZ(-300px) rotateY(-60deg)",
"transform-origin":"0 0 ",
"left":"350px",
})
$(".cubeDiv").eq(3).css({
"transform":"translateZ(-300px) rotateY(180deg)",
})
$(".cubeDiv").eq(4).css({
"transform":"translateZ(-300px) rotateY(60deg)",
"transform-origin":"right 0 ",
"left":"-350px",
})
$(".cubeDiv").eq(5).css({
"transform":"translateZ(300px) rotateY(-60deg)",
"transform-origin":"right 0 ",
"left":"-350px",
})
flag = false;
}else{
$("#box").css({
"animation" : "rotate 10s linear infinite"
})
$(".cubeDiv").css({
"transform-origin":"center center ",
"left":"0"
})
$(".cubeDiv").eq(0).css({
"transform":"translateZ(150px)",
})
$(".cubeDiv").eq(1).css({
"transform":"translateZ(150px)",
})
$(".cubeDiv").eq(2).css({
"transform":"rotateX(90deg) translateZ(150px)",
})
$(".cubeDiv").eq(3).css({
"transform":"rotateX(-90deg) translateZ(150px)",
})
$(".cubeDiv").eq(4).css({
"transform":" rotateY(90deg) translateZ(150px)",
})
$(".cubeDiv").eq(5).css({
"transform":" rotateY(-90deg) translateZ(150px)",
})
flag = true;
}
})
})
</script>
</html>
