<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>
本文链接:http://so.lmcjl.com/news/1902/