3D舞台实现

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <!--景深的作用：

            是一个作用于z轴的属性

            1、让3D场景有近大远小的效果（就是肉眼距离屏幕的距离）

            2、是一个不可以继承的。但他可以作用于后代元素（不是作用于本身的）

            原理：

            景深越大，灭点越远，元素变形更小

            景深越小，灭点越近，元素变形更大

            灭点：灭点就是你看到的尽头

            景深基点：视角的位置 perspective-origin 50% 50% 参照盒模型

            组合变换的话，放本身的话，一定要放在首位，就是组合的话就不需要在祖先元素定义了

            transform-style

                营造有层级的3d舞台

                    是一个不可继承属性，他作用于子元素

            景深是会叠加的，就是因为是作用于后代元素的，所以祖先元素都会产生叠加

        -->

        <style type="text/css">

            *{

                margin: 0;

                padding: 0;

            }

            #wrap{

                width: 400px;

                height: 400px;

                position: absolute;

                top: 50%;

                left: 50%;

                margin-left: -200px;

                margin-top: -200px;

                border: 1px solid black;

                transform-style: preserve-3d;

                perspective-origin: ;

            }

            #inner{

                width: 200px;

                height: 200px;

                position: absolute;

                top: 50%;

                left: 50%;

                margin-left: -100px;

                margin-top: -100px;

                border: 1px solid pink;

                border-radius: 50%;

                text-align: center;

                line-height: 200px;

                font-weight: bold;

                transition: 2s;

                transform: rotateX(120deg) translateZ(100px);

            }

        </style>

    </head>

    <body>

        <div id="wrap">

            <div id="inner">

                Rainbow

            </div>

        </div>

    </body>

</html>
相关文章
