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

2025/3/31 10:14:04 来源：https://blog.csdn.net/zxy19931069161/article/details/146503777 浏览: 次关键词：纯HTML+CSS实现3D空间正方体旋转

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

一、效果

效果特点：

半透明发光正方体进行多轴旋转
核心光点脉冲效果
正方体边框的霓虹光效
多重阴影叠加的立体效果

实现原理：

使用CSS 3D变换实现正方体结构
通过preserve-3d保持三维空间关系
组合使用rotateX/Y/Z实现多轴旋转
使用box-shadow实现发光效果

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

修改cube的尺寸调整正方体大小
调整animation-duration改变旋转速度
修改border和background颜色改变主题色
调整box-shadow参数改变发光强度

二、代码

<!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属性指定嵌套元素是怎样在三维空间中呈现。