HTML&CSS：纯CSS实现3D立方体二维码旋转特效

这段代码实现了一个动态旋转的立方体，每个面都带有独特的二维码背景图案。通过CSS的3D变换和动画功能，创建了一个视觉上引人入胜的效果，适用于展示CSS的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>
        cube {
            --s: 243px;
            --hs: calc(var(--s) / 2);
            display: block;
            width: var(--s);
            height: var(--s);
            transform-style: preserve-3d;
            will-change: transform;
            animation: r 15s linear infinite;
        }

        side {
            position: absolute;
            width: 100%;
            height: 100%;

            --sq: conic-gradient(from 270deg at calc(100% / 3) calc(100% / 3),
                    #fff 90deg, transparent 0);

            background:
                var(--sq) calc(var(--s) / 3) calc(var(--s) / 3) / 100% 100%,
                var(--sq) calc(100% / 6) calc(100% / 6) / calc(100% / 3) calc(100% / 3),
                var(--sq) calc(100% / 6) calc(100% / 6) / calc(100% / 9) calc(100% / 9),
                var(--sq) calc(100% / 6) calc(100% / 6) / calc(100% / 27) calc(100% / 27),
                var(--sq) calc(100% / 6) calc(100% / 6) / calc(100% / 81) calc(100% / 81);

            background-color: #000;
            background-blend-mode: difference;
        }

        side:nth-child(1) {
            transform: translateZ(var(--hs))
        }

        side:nth-child(2) {
            transform: translateZ(calc(-1 * var(--hs)));
        }

        side:nth-child(3) {
            transform: rotateY(90deg) translateZ(var(--hs))
        }

        side:nth-child(4) {
            transform: rotateY(-90deg) translateZ(var(--hs))
        }

        side:nth-child(5) {
            transform: rotateX(90deg) translateZ(var(--hs))
        }

        side:nth-child(6) {
            transform: rotateX(-90deg) translateZ(var(--hs))
        }

        @keyframes r {
            100% {
                transform: rotateX(1turn)rotateY(1turn) rotateZ(1turn)
            }
        }

        html,
        body {
            margin: 0;
            width: 100%;
            height: 100%;
            display: grid;
            place-items: center;
            overflow: hidden;
            background: #000;
            perspective: 1000px;
        }

        body:after {
            content: '';
            position: absolute;
            background: #212121;/* radial-gradient(circle at 50% 50%, #FF9800 1%, #673AB7); */
            width: 100%;
            height: 100%;
            mix-blend-mode: lighten;
        }
    </style>
</head>

<body>
    <cube>
        <side></side>
        <side></side>
        <side></side>
        <side></side>
        <side></side>
        <side></side>
    </cube>
</body>

</html>

HTML 结构

cube：定义一个立方体容器，用于包裹六个面side，并通过CSS实现3D旋转效果。
side：定义立方体的每个面，共六个面，分别对应立方体的前后左右上下六个方向。

CSS 样式

cube：定义立方体的样式，包括尺寸、3D变换样式和动画。
side：定义立方体每个面的样式。
side:nth-child(1)：定义第一个面的3D变换，将其推向立方体的正前方。
side:nth-child(2)：定义第二个面的3D变换，将其推向立方体的正后方。
side:nth-child(3)：定义第三个面的3D变换，将其绕Y轴旋转90度并推向立方体的右侧。
side:nth-child(4)：定义第四个面的3D变换，将其绕Y轴旋转-90度并推向立方体的左侧。
side:nth-child(5)：定义第五个面的3D变换，将其绕X轴旋转90度并推向立方体的顶部。
side:nth-child(6)：定义第六个面的3D变换，将其绕X轴旋转-90度并推向立方体的底部。
@keyframes r：定义立方体的旋转动画。在100%时，立方体绕X、Y、Z轴各旋转一圈。
html, body：设置页面的整体布局。

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