3D 立体 backface-visibility

<!DOCTYPE html>
<html><head><!--backface-visibility属性用来设置，是否显示元素的背面，默认是显示的backface-visibility:keyword;keyword有两个值，hidden和visible，默认是是visible所以是在每个元素里面设置的--><meta charset="UTF-8"><title></title><style type="text/css">*{padding: 0;margin: 0;}#wrap{position: absolute;left: 50%;top: 50%;width: 400px;height: 400px;margin-left: -200px;margin-top: -200px;border: 1px solid;perspective: 200px;background: url(3.jpg) no-repeat;background-size:100% 100%;}#wrap > .box{width: 100px;height: 100px;position: absolute;left: 0;top: 0;right: 0;bottom: 0;margin: auto;transform-style: preserve-3d;transition: 3s;transform-origin: center center 50%; }#wrap > .box > div{position: absolute;width: 100px;height: 100px;background: rgba(123,321,333,.3);text-align: center;font: 50px/100px "微软雅黑";backface-visibility: hidden;}#wrap > .box >div:nth-child(5){top: -100px;transform-origin: bottom;transform: rotateX(90deg);}#wrap > .box >div:nth-child(6){bottom: -100px;transform-origin: top;transform: rotateX(-90deg);}#wrap > .box >div:nth-child(3){left: -100px;transform-origin: right;transform: rotateY(-90deg);}#wrap > .box >div:nth-child(4){right: -100px;transform-origin: left;transform: rotateY(90deg);}#wrap > .box >div:nth-child(2){transform:   translateZ(-100px) rotateX(180deg);}#wrap > .box >div:nth-child(1){z-index: 1;}#wrap:hover .box{transform: rotate3d(1,1,1,180deg);}</style></head><body><div id="wrap"><div class="box"><div>前</div><div>后</div><div>左</div><div>右</div><div>上</div><div>下</div></div></div></body>
</html>