css3绘制魔方
上代码，上菜
<body>
<div class="wrap">
<div class="box box1">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="box box2">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="box box3">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="box box4">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="box box5">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="box box6">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</body>
<style>
.wrap{
position: relative;
transform-style: preserve-3d;
transform-origin: center center;
transform: rotateX(-30deg) rotateY(-80deg);
width: 198px;
height: 198px;
margin: 200px auto;
}
.wrap:hover{
animation: myfirst 8s;
}
@keyframes myfirst
{
0% {transform: rotateX(-30deg) rotateY(-80deg);}
25% {transform: rotateX(360deg) rotateY(-120deg);}
50% {transform: rotateY(-30deg) rotateY(-60deg);}
100% {transform: rotateY(-360deg) rotateY(-80deg);}
}
.box{
position: absolute;
left: 0;
top: 0;
width: 198px;
height: 198px;
}
.box div{
float: left;
width: 60px;
height: 60px;
background-color: red;
border: solid 1px #666;
margin: 2px;
box-shadow: 0 1px 2px rgba(0,0,0, 0.3);
border-radius: 5px;
}
.box1{
transform: rotateY(90deg) translateZ(99px);
}
.box1>div{
background-color: red;
}
.box2{
transform: rotateY(90deg) translateZ(-99px);
}
.box2>div{
background-color: green;
}
.box3{
transform: rotateX(90deg) translateZ(99px);
}
.box3>div{
background-color: blue;
}
.box4{
transform: rotateX(90deg) translateZ(-99px);
}
.box4>div{
background-color: yellow;
}
.box5{
transform: rotateX(0deg) translateZ(-99px);
}
.box5>div{
background-color: palegreen;
}
.box6{
transform: rotateX(0deg) translateZ(99px);
}
.box6>div{
background-color: aqua;
}
</style>
主要使用了css3的
transform-style: preserve-3d;的使用，通过把元素转换为3d属性的结构，对应的添加了Z轴的属性，生成6个div使其重叠在一起，然后使用transform: rotateX(0deg) translateZ(99px)等向Z轴平移或者XY轴平移，达到3d的效果，注：给定div需要有宽高