3D 立体 backface-visibility

Posted 2021-01-05 caicaihong

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>

以上是关于3D 立体 backface-visibility的主要内容，如果未能解决你的问题，请参考以下文章