CSS 3.0实现书桌3D特效

越陌度阡

发布于 2020-11-26 15:44:23

3740

发布于 2020-11-26 15:44:23

文章被收录于专栏：大前端（横向跨端 & 纵向全栈）

分享一个用CSS 3.0实现的书桌3D特效，效果如下：

实现代码如下，欢迎大家复制粘贴。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>CSS 3.0实现书桌3D效果</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .table {
            width: 400px;
            height: 300px;
            position: absolute;
            left: 50%;
            top: 50%;
            margin: -150px 0 0 -200px;
            transform-style: preserve-3d;
            animation: change 8s linear 0s infinite;
        }

        .table div {
            position: absolute;
        }

        .table1 {
            width: 400px;
            height: 300px;
            background: #cdd;
            color: red;
            text-align: center;
            font-size: 50px;
            line-height: 150px;
            transform: rotateX(30deg);
        }

        .table2 {
            width: 400px;
            height: 300px;
            background: #ced;
            transform-style: preserve-3d;
            transform: rotateX(30deg) translateZ(-30px);
        }

        .table2 .left {
            width: 30px;
            height: 300px;
            background: #ddd;
            transform-origin: left center;
            transform: rotateY(-90deg);
        }

        .table2 .before {
            width: 400px;
            height: 30px;
            background: #eee;
            left: 0;
            bottom: 0;
            transform-origin: bottom center;
            transform: rotateX(-90deg);
        }

        .table2 .right {
            width: 30px;
            height: 300px;
            background: #bbb;
            right: 0;
            bottom: 0;
            transform-origin: right center;
            transform: rotateY(90deg);
        }

        .table2 .after {
            width: 400px;
            height: 30px;
            background: #aaa;
            left: 0;
            top: 0;
            transform-origin: top center;
            transform: rotateX(90deg);
        }

        .table2 .least {
            width: 30px;
            height: 30px;
            background: red;
            position: absolute;
            transform-style: preserve-3d;
            transform: translateZ(-200px);
        }

        .table2 .least1 {
            left: 20px;
            top: 20px;
        }

        .table2 .least2 {
            right: 20px;
            top: 20px;
        }

        .table2 .least3 {
            left: 20px;
            bottom: 20px;
        }

        .table2 .least4 {
            right: 20px;
            bottom: 20px;
        }

        .table2 .least .least_left {
            width: 200px;
            height: 30px;
            background: blue;
            position: absolute;
            left: -100px;
            top: 0;
            transform: rotateY(90deg) translateX(-100px);
        }

        .table2 .least .least_before {
            width: 30px;
            height: 200px;
            background: pink;
            position: absolute;
            left: 100px;
            top: 0;
            transform: rotateX(90deg) translateY(100px) translateX(-100px) translateZ(70px);
        }

        .table2 .least .least_right {
            width: 200px;
            height: 30px;
            background: green;
            position: absolute;
            right: 100px;
            top: 0;
            transform: rotateY(90deg) translateX(-100px) translateZ(200px);
        }

        .table2 .least .least_after {
            width: 30px;
            height: 200px;
            background: yellow;
            position: absolute;
            left: 100px;
            top: 0;
            transform: rotateX(90deg) translateX(-100px) translateY(100px) translateZ(100px);
        }

        @keyframes change {
            from {
                transform: rotateX(40deg) rotateY(0deg);
            }

            to {
                transform: rotateX(40deg) rotateY(360deg);
            }
        }
    </style>
</head>

<body>
    <div class="table">
        <div class="table1">
            好好学习<br />天天向上
        </div>
        <div class="table2">
            <div class="left"></div>
            <div class="before"></div>
            <div class="right"></div>
            <div class="after"></div>
            <div class="least least1">
                <div class="least_left"></div>
                <div class="least_before"></div>
                <div class="least_right"></div>
                <div class="least_after"></div>
            </div>
            <div class="least least2">
                <div class="least_left"></div>
                <div class="least_before"></div>
                <div class="least_right"></div>
                <div class="least_after"></div>
            </div>
            <div class="least least3">
                <div class="least_left"></div>
                <div class="least_before"></div>
                <div class="least_right"></div>
                <div class="least_after"></div>
            </div>
            <div class="least least4">
                <div class="least_left"></div>
                <div class="least_before"></div>
                <div class="least_right"></div>
                <div class="least_after"></div>
            </div>
        </div>
    </div>

</body>

</html>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2019/07/28 ，如有侵权请联系 cloudcommunity@tencent.com 删除

特效

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

特效

登录后参与评论

0 条评论

热度

CSS 3.0实现书桌3D特效

CSS 3.0实现书桌3D特效

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐