以下是一个使用纯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属性指定嵌套元素是怎样在三维空间中呈现。
| 值 | 描述 |
|---|---|
| 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轴同时旋转实现更炫酷的旋转效果。