HTML&CSS ：必学！打造 3D 立方体动画

玄之 · 发表于 2025-3-3 09:06:35

这段代码通过纯CSS实现了一个动态的3D立方体动画，立方体在旋转的同时，每个侧面的文字会动态变化位置。整体效果生动有趣，适合用于动画展示或创意页面。

演示效果

HTML&CSS

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>公众号关注：前端Hardy</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background: #e8e8e8;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }

        .scene {
            width: 300px;
            height: 300px;
            margin: 100px auto 0;
            perspective: 1200px;
        }

        .cube {
            position: relative;
            width: 300px;
            height: 300px;
            transform-style: preserve-3d;
            transform: translateZ(-150px) rotateX(0deg);
            animation: example 15s linear infinite;
        }

        .side {
            position: absolute;
            width: 300px;
            height: 300px;
            box-sizing: border-box;
            background-color: #999;
            background-size: 100% 100%;
            background-repeat: no-repeat;
            padding: 120px 0;
            font: 60px/1 'Trebuchet MS', sans-serif;
            color: #fff;
            text-transform: uppercase;
            text-align: center;
        }

        .side::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.15);
        }

        .side span {
            position: relative;
            display: block;
        }

        .back span {
            animation: back 15s linear infinite;
        }

        .top span {
            animation: top 15s linear infinite;
        }

        .bottom span {
            animation: bottom 15s linear infinite;
        }

        .front span {
            animation: front 15s linear infinite;
        }

        .guides {
            position: absolute;
            top: 0;
            left: 50px;
            width: 200px;
            height: 100%;
            border-style: dotted;
            border-width: 0 1px;
            color: rgba(255, 255, 255, 0.6);
        }

        .guides::before {
            content: '';
            position: absolute;
            top: 0;
            left: 50%;
            width: 0;
            height: 100%;
            border-left: 1px dotted;
        }

        .back {
            transform: translateZ(-150px) rotateX(180deg);
        }

        .top {
            transform: translateY(-150px) rotateX(90deg);
        }

        .bottom {
            transform: translateY(150px) rotateX(270deg);
        }

        .front {
            transform: translateZ(150px);
        }

        .back {
            background-image: url(http://askd.rocks/pres/rd-ft/assets/pictures/back.jpg);
        }

        .top {
            background-image: url(http://askd.rocks/pres/rd-ft/assets/pictures/top.jpg);
        }

        .bottom {
            background-image: url(http://askd.rocks/pres/rd-ft/assets/pictures/bottom.jpg);
        }

        .front {
            background-image: url(http://askd.rocks/pres/rd-ft/assets/pictures/front.jpg);
        }

        @keyframes example {
            0% {
                transform: translateZ(-150px) rotateX(0deg);
            }

            15% {
                transform: translateZ(-150px) rotateX(90deg);
            }

            25% {
                transform: translateZ(-150px) rotateX(90deg);
            }

            40% {
                transform: translateZ(-150px) rotateX(180deg);
            }

            50% {
                transform: translateZ(-150px) rotateX(180deg);
            }

            65% {
                transform: translateZ(-150px) rotateX(270deg);
            }

            75% {
                transform: translateZ(-150px) rotateX(270deg);
            }

            90% {
                transform: translateZ(-150px) rotateX(360deg);
            }

            100% {
                transform: translateZ(-150px) rotateX(360deg);
            }
        }

        @keyframes front {
            0% {
                transform: translateY(0px)
            }

            15% {
                transform: translateY(-100px);
            }

            25% {
                transform: translateY(-100px);
            }

            40% {
                transform: translateY(0px);
            }

            50% {
                transform: translateY(0px);
            }

            65% {
                transform: translateY(100px);
            }

            75% {
                transform: translateY(100px);
            }

            90% {
                transform: translateY(0px);
            }

            100% {
                transform: translateY(0px);
            }
        }

        @keyframes bottom {
            0% {
                transform: translateY(100px)
            }

            15% {
                transform: translateY(0px);
            }

            25% {
                transform: translateY(0px);
            }

            40% {
                transform: translateY(-100px);
            }

            50% {
                transform: translateY(-100px);
            }

            65% {
                transform: translateY(0px);
            }

            75% {
                transform: translateY(0px);
            }

            90% {
                transform: translateY(100px);
            }

            100% {
                transform: translateY(100px);
            }
        }

        @keyframes back {
            0% {
                transform: translateY(0px)
            }

            15% {
                transform: translateY(100px);
            }

            25% {
                transform: translateY(100px);
            }

            40% {
                transform: translateY(0px);
            }

            50% {
                transform: translateY(0px);
            }

            65% {
                transform: translateY(-100px);
            }

            75% {
                transform: translateY(-100px);
            }

            90% {
                transform: translateY(0px);
            }

            100% {
                transform: translateY(0px);
            }
        }

        @keyframes top {
            0% {
                transform: translateY(-100px)
            }

            15% {
                transform: translateY(0px);
            }

            25% {
                transform: translateY(0px);
            }

            40% {
                transform: translateY(100px);
            }

            50% {
                transform: translateY(100px);
            }

            65% {
                transform: translateY(0px);
            }

            75% {
                transform: translateY(0px);
            }

            90% {
                transform: translateY(-100px);
            }

            100% {
                transform: translateY(-100px);
            }
        }
    </style>
</head>

<body>
    <div class="scene">
        <div class="cube">
            <div class="side back">
                <div class="guides"></div>
                <span>发</span>
            </div>
            <div class="side top">
                <div class="guides"></div>
                <span>财</span>
            </div>
            <div class="side bottom">
                <div class="guides"></div>
                <span>喜</span>
            </div>
            <div class="side front">
                <div class="guides"></div>
                <span>恭</span>
            </div>
        </div>
    </div>
</body>
</html>

HTML 结构

scene：整个3D场景的容器，用于设置透视效果（perspective）。
cube：立方体的容器，包含四个侧面（front、back、top、bottom）。
side：立方体的每个侧面，分别表示立方体的前面、后面、顶部和底部。
guides：辅助线，用于指示每个侧面的中心位置。
span：每个侧面的文字内容。

CSS 样式

body：设置页面背景颜色、布局方式（居中对齐）和全屏高度。
.scene：定义3D场景的容器，设置宽高和透视效果。
.cube：定义立方体的样式，包括宽高、3D变换和动画（example）。
.side：定义立方体每个侧面的样式，包括宽高、背景颜色和文字样式。
.side::before：为每个侧面添加半透明的覆盖层，增强视觉效果。
.side span：定义侧面文字的样式，使其居中显示。
.back、.top、.bottom、.front：分别定义立方体的后面、顶部、底部和前面的样式，包括背景图片和3D变换。
.guides：定义辅助线的样式，用于指示每个侧面的中心位置。
@keyframes example：定义立方体的旋转动画，使立方体在X轴上循环旋转。
@keyframes front、@keyframes top、@keyframes bottom、@keyframes back：分别为每个侧面的文字定义动画，使其在立方体旋转时动态变化位置。