<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><div class="box"> <a href="#">前</a> <a href="#">后</a> <a href="#">左</a> <a href="#">右</a> <a href="#">上</a> <a href="#">下</a> </div>
本文链接：https://my.lmcjl.com/post/20906.html
展开阅读全文
4 评论