当同事路过我的工位，看到屏幕上那个缓缓旋转、光影自然的蓝色立方体时，第一反应是：“你什么时候学会 Three.js 了？” 我笑着告诉他：这只是一个纯 CSS 文件，连一行 JavaScript 都没写。

这条消息在技术社区引发了一场小小的“认知震荡”。许多从业者惊讶地发现，CSS 3D 变换的能力已经进化到足以以假乱真的地步。而这一切的起点，不过是一堂名为“纯 CSS 3D 立方体旋转动画”的“神奇课程”。

从“以为”到“震撼”：一个立方体的技术内幕

这个仅用 HTML + CSS 构建的 3D 立方体，其核心秘密在于 CSS 的 transform-style: preserve-3d 属性和 perspective 透视函数。开发者通过六个 <div> 分别代表立方体的六个面，每个面利用 translateZ、rotateX、rotateY 精确地定位在三维坐标系中。为了让立方体“转动”，再使用 @keyframes 动画对父容器做持续旋转，视觉上就产生了一个完整、稳定的 3D 立体。

“同事看到的是蓝色半透明带细边框的立方体，实际上我连一个像素的图片都没用，全靠 CSS 的渐变和阴影模拟光照。”爆料者小陈（化名）在个人博客中写道。他强调，整个过程没有引入任何第三方库，所有计算都在浏览器样式引擎中完成。

为什么“同事以为我学了 Three.js”？

Three.js 是 WebGL 上最流行的 3D 库，通常用于创建复杂的 3D 场景。纯 CSS 3D 虽然性能上限低，但在处理简单几何体、卡片翻转、轮播图等场景时，不仅代码量更少，而且渲染更流畅，因为它直接利用了 GPU 加速的合成层。

小陈的玩笑式对比，恰恰反映了一个普遍的技术认知偏差：许多开发者对原生 CSS 的 3D 能力了解不足。事实上，早在 2012 年，CSS 就引入了 3D 变换规范，只是在大规模应用时，开发者往往默认选择 JS 框架。“这堂课让我重新审视了‘能用 CSS 就别用 JS’这条黄金法则。”一位前端工程师在评论中留言。

“这节课真的很神奇”：学习资源与社区反响

这堂“神奇课程”来自某技术教育平台的免费公开课。课程设计者将复杂的 3D 空间变换拆解成“坐标打架”“透视盒子”“面的旋转”等形象比喻，仅用 45 分钟就让零基础的学员从“看不懂”到“手搓立方体”。课程评论区被“太神奇了”“原来这么简单”“我同事也以为我用了 Three.js”刷屏。

在社交媒体上，相关话题阅读量已突破 200 万。不少 UI 设计师表示“终于明白了为什么前端说不要切图做 3D 效果”，而一些后端开发则自嘲：“看了这个立方体，我决定从今天开始认真学 CSS。”

不只是炫技：纯 CSS 3D 的真实应用场景

这个小小的立方体背后，藏着更实际的价值：页面上的 3D 翻转卡片、产品展示转台、动态信息面板，甚至简单的 3D 游戏封面，都可以用纯 CSS 实现。无需加载额外 JS 库、无需担心兼容性（现代浏览器几乎全部支持），且对移动端极其友好。

同时，它也提醒我们：基础技术从未过时，深度挖掘总有意想不到的惊喜。 正如一位资深架构师所评价：“很多‘炫酷’的需求，在面试时可能就是用 CSS 3D 来考察候选人的立体思维和调试能力。”

这个会转的立方体，或许技术含量不高，但它用一种最直观的方式，打破了我们对“前端边界”的固有想象。如果你也想体验“同事以为我学了 Three.js”的快乐，不妨打开一个 HTML 文件，输入：

.cube {
  transform-style: preserve-3d;
  animation: spin 5s infinite linear;
}

然后——享受属于你的神奇瞬间。

（全文约 980 字）