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实现立方体的动态变形和移动。

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

相关推荐
未来之窗软件服务2 小时前
免费版酒店押金原路退回系统之【房费押金计算器】实践——仙盟创梦IDE
前端·javascript·css·仙盟创梦ide·东方仙盟·酒店押金系统
Hilaku3 小时前
原生<dialog>元素:别再自己手写Modal弹窗了!
前端·javascript·html
ZzMemory7 小时前
深入了解 module.css:前端样式管理的有效方案
前端·css·面试
zc-code8 小时前
HTTP性能优化实战:从协议到工具的全面加速指南
网络·网络协议·http·缓存·性能优化·html
Dream耀12 小时前
CSS过渡 vs 动画:都有哪些技巧
前端·css
超浪的晨14 小时前
JavaWeb 入门:HTML 基础与实战详解(Java 开发者视角)
java·开发语言·前端·后端·html·个人开发
拾光拾趣录1 天前
Flexbox 布局:从“垂直居中都搞不定”到写出响应式万能布局
前端·css
编程猪猪侠1 天前
Tailwind CSS 自定义工具类与主题配置指南
前端·css
前端Hardy1 天前
HTML&CSS:惊艳!科技感爆棚的登录页面代码解析
前端·javascript·html
Sherry0071 天前
CSS Grid 交互式指南(译)(下)
css·面试