3D 立体 backface-visibility
生活随笔
收集整理的這篇文章主要介紹了
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>
?
轉載于:https://www.cnblogs.com/caicaihong/p/9634064.html
總結
以上是生活随笔為你收集整理的3D 立体 backface-visibility的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Linux下LOIC的下载和应用
- 下一篇： 高通设备找不到连接QXDM的端口