3D景深探究

最新推荐文章于 2023-02-22 07:00:22 发布

竹节虫T

最新推荐文章于 2023-02-22 07:00:22 发布

阅读量685

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_43623871/article/details/99414937

版权

前端专栏收录该内容

61 篇文章 0 订阅

订阅专栏

参照CSS3景深、三维变换属性及旋转三维立方体的实现

        .stage1 {
            width: 200px;
            height: 200px;
            border: 1px solid black;
            margin: 100px auto;
            perspective: 500px;
            /* perspective-origin: 10px 10px;//舞台元素的中心位置 默认perspective-origin:  50% 50%; */
        }

        .stage1 .demo {
            width: 200px;
            height: 200px;
            background-color: orangered;
            transform: rotateX(45deg);
        }

        ul {
            /*调整ul标签的样式，取消内边距、外边距，和“点”样式*/
            padding: 0;
            margin: 0;
            list-style-type: none;
        }

        .stage {
            /*设置舞台元素在屏幕居中，设置合适的景深大小*/
            position: relative;
            width: 800px;
            height: 800px;
            margin: 100px auto;
            perspective: 800px;
        }

        @keyframes move {

            /*设置动画关键帧*/
            0% {
                transform: rotateX(0deg);
            }

            25% {
                transform: rotateX(180deg);
            }

            50% {
                transform: rotateX(360deg) rotateY(0deg);
            }

            75% {
                transform: rotateX(360deg) rotateY(180deg);
            }

            100% {
                transform: rotateX(360deg) rotateY(360deg);
            }
        }

        .stage .three-d-box {
            /*动画容器居中在舞台元素中间*/
            width: 200px;
            height: 200px;
            position: absolute;
            left: 50%;
            top: 50%;
            margin: -100px 0 0 -100px;
            transform-style: preserve-3d;
            /*设置3D属性让子元素三维空间呈现*/
            animation: move 3s linear infinite;
            /*设置动画*/

        }

        .stage .three-d-box>li {
            /*设置动画子元素公共属性*/
            position: absolute;
            width: 200px;
            height: 200px;
            left: 0;
            top: 0;
            font-size: 50px;
            line-height: 200px;
            text-align: center;
            opacity: 0.5;
        }

        /*为了保证我们对立方体位置的控制，我们需要让动画容器在立方体的中间位置*/
        .stage .three-d-box>li:nth-child(1) {
            background-color: red;
            transform: translateZ(-100px);
        }

        .stage .three-d-box>li:nth-child(2) {
            background-color: yellow;
            transform: translateZ(100px);
        }

        .stage .three-d-box>li:nth-child(3) {
            background-color: blue;
            transform: rotateX(90deg) translateZ(100px);
        }

        .stage .three-d-box>li:nth-child(4) {
            background-color: green;
            transform: rotateX(-90deg) translateZ(100px);
        }

        .stage .three-d-box>li:nth-child(5) {
            background-color: black;
            transform: rotateY(90deg) translateZ(100px);
        }

        .stage .three-d-box>li:nth-child(6) {
            background-color: purple;
            transform: rotateY(-90deg) translateZ(100px);
        }

    <div class="stage1">
        <div class="demo">1</div>
    </div>
    <!--舞台元素，视角所在-->
    <div class="stage">
        <!--动画容器，通过它来控制整个立方体-->
        <ul class="three-d-box">
            <li>红</li>
            <!--动画元素，立方体的六个面-->
            <li>黄</li>
            <li>蓝</li>
            <li>绿</li>
            <li>黑</li>
            <li>紫</li>
        </ul>
    </div>