<!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>
3D旋转木马 点击图片切换 轮播图
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
