CSS3实战 - 3d转换 - 超级立方体

最新推荐文章于 2022-02-20 11:35:10 发布

Jepson_鹏鹏

最新推荐文章于 2022-02-20 11:35:10 发布

阅读量792

点赞数 1

分类专栏： CSS3 文章标签： css3 3d 源码

本文链接：https://blog.csdn.net/qq_16415157/article/details/52819027

版权

CSS3 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

3d 转换实战，超级立方体，源码在下面，感兴趣的可以参考

效果是这样的：
这里写图片描述

这里写图片描述

源码奉上，感兴趣的参考

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>CSS 3D转换</title>
        <style>
            body {
                margin: 0;
                padding: 0;
                background-color: black;
                perspective: 1000px;
                color: white;
            }

            .box {
                margin: 200px auto;
                height: 200px;
                width: 200px;
                position:relative;
                transform-style:preserve-3d;
                transform:rotateX(30deg) rotateY(30deg);
                animation: rotate 10s linear infinite;
            }

            .box div {
                line-height: 200px;
                text-align: center;
                position:absolute;
                top: 0;
                left:0;
                right:0;
                bottom:0;
                transition: all 1s;
                box-shadow: inset 0 0 1px 6px rgba(255,255,255,0.8),
                            inset 0 0 1px 12px rgba(255,255,0,0.8),
                            inset 0 0 1px 18px rgba(255,0,0,0.8),
                            inset 0 0 1px 24px rgba(0,0,255,0.8),
                            0 0 80px 10px rgba(255,255,255,0.8);

            }

            /* 小盒子六个面居中 变长为大盒子的一半 */
            .box .little {
                line-height: 100px;
                top: 25%;
                left:25%;
                right:25%;
                bottom:25%;
            }

            /* 3d 转换 大盒子 六个面 */
            .front {
                transform: translateZ(100px);
                background:rgba(255,255,0,0.8);
            }
            .back  {
                transform: translateZ(-100px);
                background:rgba(0,255,255,0.8);
            }
            .left {
                transform: rotateY(-90deg) translateZ(100px);
                background:rgba(0,255,0,0.8);
            }
            .right {
                transform: rotateY(90deg) translateZ(100px);
                background:rgba(0,0,255,0.8);
            }
            .top {
                transform: rotateX(90deg) translateZ(100px);
                background:rgba(255,0,255,0.8);
            }
            .bottom {
                transform: rotateX(-90deg) translateZ(100px);
                background:rgba(125,125,255,0.8);
            }

            /*  大盒子 hover 变换 */
            .box:hover .front {
                transform: translateZ(200px);
            }
            .box:hover .back {
                transform: translateZ(-200px);
            }
            .box:hover .left {
                transform: rotateY(-90deg) translateZ(200px);
            }
            .box:hover .right {
                transform: rotateY(90deg) translateZ(200px);
            }
            .box:hover .top {
                transform: rotateX(90deg) translateZ(200px);
            }
            .box:hover .bottom {
                transform: rotateX(-90deg) translateZ(200px);
            }

            /* 3d 转换 小盒子 六个面 */
            .l-front {
                transform: translateZ(50px);
                background:rgba(255,255,0,0.8);
            }
            .l-back  {
                transform: translateZ(-50px);
                background:rgba(0,255,255,0.8);
            }
            .l-left {
                transform: rotateY(-90deg) translateZ(50px);
                background:rgba(0,255,0,0.8);
            }
            .l-right {
                transform: rotateY(90deg) translateZ(50px);
                background:rgba(0,0,255,0.8);
            }
            .l-top {
                transform: rotateX(90deg) translateZ(50px);
                background:rgba(255,0,255,0.8);
            }
            .l-bottom {
                transform: rotateX(-90deg) translateZ(50px);
                background:rgba(125,125,255,0.8);
            }

            /* 小盒子 hover 变换 */
            .box:hover .l-front {
                transform: translateZ(100px);
            }
            .box:hover .l-back {
                transform: translateZ(-100px);
            }
            .box:hover .l-left {
                transform: rotateY(-90deg) translateZ(100px);
            }
            .box:hover .l-right {
                transform: rotateY(90deg) translateZ(100px);
            }
            .box:hover .l-top {
                transform: rotateX(90deg) translateZ(100px);
            }
            .box:hover .l-bottom {
                transform: rotateX(-90deg) translateZ(100px);
            }

            /* 旋转动画 */
            @keyframes rotate {
                from {
                    transform: rotateX(0deg) rotateY(360deg)
                }
                to {
                    transform: rotateX(360deg) rotateY(0deg)
                }
            }
        </style>
    </head>
    <body>
        <div class="box">
            <!-- 外面那层大盒子 六个面 -->
            <div class="front">front</div>
            <div class="back">back</div>
            <div class="left">left</div>
            <div class="right">right</div>
            <div class="top">top</div>
            <div class="bottom">bottom</div>
            <!-- 里面那层小盒子 六个面 -->
            <div class="little l-front">front</div>
            <div class="little l-back">back</div>
            <div class="little l-left">left</div>
            <div class="little l-right">right</div>
            <div class="little l-top">top</div>
            <div class="little l-bottom">bottom</div>
        </div>
    </body>
    </html>