HTML&CSS ：立方体3D旋转，比想象中 “丝滑” 10 倍

这段代码通过纯CSS实现了一个动态的3D立方体效果，适合用于展示3D动画或创意页面。

大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试，若未能解决问题，私信回复源码两字，我会发送完整的压缩包给你。

演示效果

HTML&CSS

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>公众号关注：前端Hardy</title>
    <style>

        * {
            box-sizing: border-box;
        }

        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
            background: #333;
            display: flex;
            justify-content: center;
        }

        .container {
            transform-style: preserve-3d;
            perspective: 2000px;
            transform: rotateX(-30deg) rotateY(-45deg);
        }

        .box-wrapper {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            transform-style: preserve-3d;
            transform: translate3d(0em, 3em, 1.5em);
        }

        .box-wrapper:last-child {
            transform: rotateY(-90deg) rotateX(90deg) translate3d(0, 3em, 1.5em);
        }

        .box-wrapper:first-child {
            transform: rotateZ(-90deg) rotateX(-90deg) translate3d(0, 3em, 1.5em);
        }

        .box-wrapper:nth-child(1) .box {
            background-color: #3498db;
        }

        .box-wrapper:nth-child(1) .box:before {
            background-color: #3498db;
        }

        .box-wrapper:nth-child(1) .box:after {
            background-color: #2980b9;
        }

        .box-wrapper:nth-child(2) .box {
            background-color: #2ecc71;
        }

        .box-wrapper:nth-child(2) .box:before {
            background-color: #2ecc71;
        }

        .box-wrapper:nth-child(2) .box:after {
            background-color: #27ae60;
        }

        .box-wrapper:nth-child(3) .box {
            background-color: #e74c3c;
        }

        .box-wrapper:nth-child(3) .box:before {
            background-color: #e74c3c;
        }

        .box-wrapper:nth-child(3) .box:after {
            background-color: #c0392b;
        }

        .box {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            transform-style: preserve-3d;
            animation: animate 4s infinite;
            width: 3em;
            height: 3em;
        }

        .box:before,
        .box:after {
            position: absolute;
            width: 100%;
            height: 100%;
            content: "";
        }

        .box:before {
            left: 100%;
            bottom: 0;
            transform: rotateY(90deg);
            transform-origin: 0 50%;
        }

        .box:after {
            left: 0;
            bottom: 100%;
            transform: rotateX(90deg);
            transform-origin: 0 100%;
        }

        @keyframes animate {
            8.33% {
                transform: translate3d(-50%, -50%, 0) scaleZ(2);
            }

            16.7% {
                transform: translate3d(-50%, -50%, -3em) scaleZ(1);
            }

            25% {
                transform: translate3d(-50%, -100%, -3em) scaleY(2);
            }

            33.3% {
                transform: translate3d(-50%, -150%, -3em) scaleY(1);
            }

            41.7% {
                transform: translate3d(-100%, -150%, -3em) scaleX(2);
            }

            50% {
                transform: translate3d(-150%, -150%, -3em) scaleX(1);
            }

            58.3% {
                transform: translate3d(-150%, -150%, 0) scaleZ(2);
            }

            66.7% {
                transform: translate3d(-150%, -150%, 0) scaleZ(1);
            }

            75% {
                transform: translate3d(-150%, -100%, 0) scaleY(2);
            }

            83.3% {
                transform: translate3d(-150%, -50%, 0) scaleY(1);
            }

            91.7% {
                transform: translate3d(-100%, -50%, 0) scaleX(2);
            }

            100% {
                transform: translate3d(-50%, -50%, 0) scaleX(1);
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="box-wrapper">
            <div class="box"></div>
        </div>
        <div class="box-wrapper">
            <div class="box"></div>
        </div>
        <div class="box-wrapper">
            <div class="box"></div>
        </div>
    </div>
</body>

</html>

HTML 结构

container：定义了一个3D场景的容器，用于容纳多个立方体（box）。
box-wrapper：每个box-wrapper包含一个立方体box，用于定义立方体的位置和旋转状态。
box：表示一个立方体，通过伪元素::before和::after定义立方体的侧面。

CSS 样式

html, body：设置页面宽高为100%，背景颜色为#333，并使用flex布局居中显示内容。
.container：定义3D场景的容器，设置perspective为2000px以增强3D效果，并通过rotateX和rotateY旋转整个场景。
.box-wrapper：定义立方体的容器，通过transform和rotate调整每个立方体的位置和方向。
.box：定义立方体的样式，包括宽高、位置和3D变换效果。通过animation实现动态的3D变形效果。
.box::before 和 .box::after：定义立方体的侧面，通过rotateY和rotateX实现侧面的3D效果。
@keyframes animate：定义立方体的动画效果，通过translate3d、scaleX、scaleY和scaleZ实现立方体的动态变形和移动。

各位互联网搭子，要是这篇文章成功引起了你的注意，别犹豫，关注、点赞、评论、分享走一波，让我们把这份默契延续下去，一起在知识的海洋里乘风破浪！