详情 www.sharedblog.cn/?post=66
CSS代码
<style type="text/css">
div,body,input,textarea,a,select,h1,h2,h3,h4,h5,h6,span,p,ul,ol,li,dl,dd,dt,form,table,span,img{
margin:0;
padding:0;
}
body,html{
height: 100%;
}
.box{
width: 300px;
height: 300px;
position: relative;
margin: 100px;
transform: rotateX(30deg) rotateY(-30deg);
transform-style: preserve-3d;
}
.box:after{
content: ".";
height: 0;
clear: both;
overflow: hidden;
display: block;
visibility: hidden;
}
.box a{
text-decoration: none;
text-align: center;
line-height: 200px;
font-size: 35px;
font-weight: bold;
color: black;
position: absolute;
display: block;
width: 200px;
height: 200px;
background: red;
opacity: .4;
transform-style: preserve-3d;
}
.box a:nth-child(1){
background: #fe04ef;
transform: translateZ(-100px);
}
.box a:nth-child(2){
background: #0497fe;
transform: translateZ(100px);
}
.box a:nth-child(3){
background: #04fefb;
transform: rotateY(90deg) translateZ(-100px);
}
.box a:nth-child(4){
background: #fe2d04;
transform: rotateY(-90deg) translateZ(-100px);
}
.box a:nth-child(5){
background: #effe04;
transform: rotateX(-90deg) translateZ(-100px);
}
.box a:nth-child(6){
background: #04fe56;
transform: rotateX(90deg) translateZ(-100px);
}
</style>
HTML代码
<body>
<div class="box">
<a href="#">前</a>
<a href="#">后</a>
<a href="#">左</a>
<a href="#">右</a>
<a href="#">上</a>
<a href="#">下</a>
</div>
</body>