纯HTML+CSS实现3D空间正方体旋转

以下是一个使用纯HTML和CSS实现的3D空间正方体旋转效果。

一、效果

效果特点:

  1. 半透明发光正方体进行多轴旋转

  2. 核心光点脉冲效果

  3. 正方体边框的霓虹光效

  4. 多重阴影叠加的立体效果

实现原理:

  1. 使用CSS 3D变换实现正方体结构

  2. 通过preserve-3d保持三维空间关系

  3. 组合使用rotateX/Y/Z实现多轴旋转

  4. 使用box-shadow实现发光效果

可以通过调整以下参数自定义效果:

  • 修改cube的尺寸调整正方体大小

  • 调整animation-duration改变旋转速度

  • 修改border和background颜色改变主题色

  • 调整box-shadow参数改变发光强度


二、代码

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        body {
            margin: 0;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #000;
            overflow: hidden;
        }


        /* 旋转立方体容器 */
        .cube-container {
            position: relative;
            width: 300px;
            height: 300px;
            transform-style: preserve-3d;
            animation: cubeRotate 20s infinite linear;
            z-index: 2;
        }

        /* 立方体公共样式 */
        .cube {
            position: absolute;
            width: 200px;
            height: 200px;
            background: rgba(0, 255, 255, 0.1);
            border: 2px solid #0ff;
            transform-style: preserve-3d;
            box-shadow: 0 0 40px #0ff;
        }

        /* 立方体各面 */
        .front { transform: translateZ(100px); }
        .back { transform: translateZ(-100px); }
        .top { transform: rotateX(90deg) translateZ(100px); }
        .bottom { transform: rotateX(-90deg) translateZ(100px); }
        .left { transform: rotateY(-90deg) translateZ(100px); }
        .right { transform: rotateY(90deg) translateZ(100px); }

        /* 核心光点 */
        .core {
            position: absolute;
            width: 20px;
            height: 20px;
            background: #0ff;
            border-radius: 50%;
            filter: blur(15px);
            animation: pulse 2s infinite;
        }

        /* 动画定义 */
        @keyframes cubeRotate {
            0% { transform: rotateX(0) rotateY(0) rotateZ(0); }
            100% { transform: rotateX(360deg) rotateY(720deg) rotateZ(360deg); }
        }

        @keyframes pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.5); }
        }
    </style>
</head>
<body>
    <div class="cube-container">
        <div class="cube front"></div>
        <div class="cube back"></div>
        <div class="cube top"></div>
        <div class="cube bottom"></div>
        <div class="cube left"></div>
        <div class="cube right"></div>
        <div class="core"></div>
    </div>
</body>
</html>

一些重点css属性:

① transform-style: preserve-3d;

transform--style属性指定嵌套元素是怎样在三维空间中呈现。

描述
flat 表示所有子元素在2D平面呈现。
preserve-3d 表示所有子元素在3D空间中呈现。

②@keyframes cubeRotate {

0% { transform: rotateX(0) rotateY(0) rotateZ(0); }

100% { transform: rotateX(360deg) rotateY(720deg) rotateZ(360deg); }

}

动画围绕着X轴、Y轴、Z轴同时旋转实现更炫酷的旋转效果。

相关推荐
qq. 28040339842 小时前
CSS层叠顺序
前端·css
喝拿铁写前端3 小时前
SmartField AI:让每个字段都找到归属!
前端·算法
猫猫不是喵喵.3 小时前
vue 路由
前端·javascript·vue.js
淮北4943 小时前
ros调试工具foxglove使用指南三:在3d空间写写画画(Panel->3D ->Scene entity)
python·学习·3d·机器人
烛阴3 小时前
JavaScript Import/Export:告别混乱,拥抱模块化!
前端·javascript
bin91534 小时前
DeepSeek 助力 Vue3 开发:打造丝滑的表格(Table)之添加行拖拽排序功能示例12,TableView16_12 拖拽动画示例
前端·javascript·vue.js·ecmascript·deepseek
GISer_Jing4 小时前
[Html]overflow: auto 失效原因,flex 1却未设置min-height &overflow的几个属性以及应用场景
前端·html
程序员黄同学4 小时前
解释 Webpack 中的模块打包机制,如何配置 Webpack 进行项目构建?
前端·webpack·node.js
拉不动的猪4 小时前
vue自定义“权限控制”指令
前端·javascript·vue.js
再学一点就睡4 小时前
浏览器页面渲染机制深度解析:从构建 DOM 到 transform 高效渲染的底层逻辑
前端·css