构建立体面案例

一、构建立体面案例

 <style>

        *{

            margin: 0;

            padding: 0;

            list-style: none;

        }

        .box,ul, li{

            width: 200px;

            height: 200px;

        }

        .box{

            border: 1px solid #000;

            margin: 100px auto;

            perspective: 700px;

        }

        .box ul{

            position: relative;

            transform-style: preserve-3d;

            transition:all 1s;

        }

        .box li{

            position: absolute;

            left: 0;top: 0;

        }

        .box li:nth-of-type(1){

            background-color: pink;

            transform:translateZ(100px);

            /*opacity: .7;*/

        }

        .box li:nth-of-type(2){

            background-color: skyblue;

            transform:rotateX(-90deg) translateZ(100px);

        }

        .box:hover ul{

            transform:rotateX(90deg);

        }

    </style>

    <div class="box">

        <ul>

            <li>前面</li>

            <li>底面</li>

        </ul>

    </div>