<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
background: skyblue;
}
html,body{
height: 100%;;
}
#box1{
100%;
height: 100%;
}
#box2{
200px;
height: 200px;
margin: 200px auto;
position: relative;
transform-style: preserve-3d;
/*perspective: 500px;*/
animation: a 10s linear infinite;
}
.box{
position: absolute;
height: 200px;
200px;
border: 1px solid #fff;
background: rgba(0,0,0,.5);
transition: transform 2s ease-in;
color: #fff;
font-size: 25px;
font-weight: bold;
line-height: 200px;
text-align: center;
}
.small{
position: absolute;
top: 50px;
left: 50px;
height: 100px;
100px;
border: 1px solid #000;
background: rgba(255,255,255,1);
transition: transform 2s ease-in;
}
#before{
transform: translateZ(100px);
}
#after{
transform: translateZ(-100px);
}
#left{
transform: rotateY(90deg) translateZ(100px);
}
#right{
transform: rotateY(90deg) translateZ(-100px);
}
#up{
transform: rotateX(90deg) translateZ(100px);
}
#down{
transform: rotateX(90deg) translateZ(-100px);
}
#s-before{
transform: translateZ(50px);
}
#s-after{
transform: translateZ(-50px);
}
#s-left{
transform: rotateY(90deg) translateZ(50px);
}
#s-right{
transform: rotateY(90deg) translateZ(-50px);
}
#s-up{
transform: rotateX(90deg) translateZ(50px);
}
#s-down{
transform: rotateX(90deg) translateZ(-50px);
}
#box2:hover #before{
transform: translateZ(300px);
}
#box2:hover #after{
transform: translateZ(-300px);
}
#box2:hover #left{
transform: rotateY(90deg) translateZ(300px);
}
#box2:hover #right{
transform: rotateY(90deg) translateZ(-300px);
}
#box2:hover #up{
transform: rotateX(90deg) translateZ(300px);
}
#box2:hover #down{
transform: rotateX(90deg) translateZ(-300px);
}
@-webkit-keyframes a{
from{
transform: rotateX(0deg) rotateY(0deg);
}
to{
transform: rotateX(360deg) rotateY(360deg);
}
}
</style>
</head>
<body>
<div id="box1">
<div id="box2">
<div id="before" class="box">
前面
</div>
<div id="after" class="box">
后面
</div>
<div id="left" class="box">
左面
</div>
<div id="right" class="box">
右面
</div>
<div id="up" class="box">
上面
</div>
<div id="down" class="box">
下面
</div>
<span class="small" id="s-before"></span>
<span class="small" id="s-after"></span>
<span class="small" id="s-left"></span>
<span class="small" id="s-right"></span>
<span class="small" id="s-up"></span>
<span class="small" id="s-down"></span>
</div>
</div>
</body>
</html>
本次的这个demo用了CSS3中的2d和3d属性，完成了一个盒子的立体效果