完全使用 CSS 和 JavaScript 构建的 10 个令人惊叹的 3D 项目

从拨号互联网和 GeoCities 页面开始，Web 已经有了很长的路要走。 网站现在完全响应并可从触摸屏设备访问。 但是现代浏览器已经超越了“主流”网页设计。

仅使用前端技术就可以在浏览器中创建令人惊叹的 3D 效果。 在这篇文章中，我将展示我最喜欢的 3D 网络项目，这些项目展示了网络在短短几十年内取得的进展。

透视框

信不信由你，这个盒子动画是用纯 CSS3 变换制作的。 使用 CSS 渲染实际的立方体非常容易，并且交替的颜色适用于不同的类。

动画使用循环关键帧动画来产生这些盒子在 3D 空间中弹跳的错觉。 通过单击右上角的任何透视按钮，您甚至可以从不同角度查看此 3D 模型。 很酷！

纯 CSS3 图

另一个纯 CSS3 动画的例子是这个由 Ana Tudor 创建的条形图。 它使用一个简单的 HTML 容器，其中四个内部 div 代表每个矩形的四个边。

这些条很容易使用 CSS3 制作动画，并且它们都可以增长到不同的高度。 但最令人印象深刻的部分是整个动画如何在条形图增长的同时旋转视角。

这使用了大量的 Sass 代码来自动化具有计算功能的动画，所以它有点技术性。 但是，如果您想了解更多关于 3D 的知识，那么这是一支可以深入研究的可靠笔。

管视角

要获得令人迷惑的 Webkit 浏览器体验，请查看仅使用一些 CSS3 转换和 Sass 属性创建的 3D 隧道。

交替的颜色通过 Sass for 循环运行，该循环在特定时间段后交替 HSL 颜色值。 这个循环会让人产生一种错觉，那就是你正在无限期地穿过一条五颜六色的五彩纸屑隧道。 相当狂野！

它可能看起来没有什么特别之处，对于主要网站来说绝对不实用。 但这证明了您可以利用一些创造力和编码知识做多少事情。

CSS 中的 3D iPhone

iPhone 4 提供了全新的设计，让每个人都为这款杀手级的新智能手机大肆宣传。 开发人员 Jonathan Levaillant 一定非常喜欢 iPhone 4，因为他用纯 CSS 重新创建了设计。

随着旋转设备的运行，这个非常酷。 它看起来确实像一部 iPhone，外带甚至可以以逼真的渐变反射光线。 iPhone 的屏幕播放苹果服务器上托管的 mp4 视频，而且它的透视图也正确失真。

最疯狂的是它如何完全依赖 CSS 来处理所有事情。 再过 10 年，当纯 CSS3 iPhone 在浏览器中完全交互时，我会很兴奋。

3D 太阳系

银河系是我们宇宙的一个小角落，它在这支由 Julian Garnier 创造的神奇笔中得到了充分体现。

它确实使用了很多 CSS，但大多数可定制的效果都依赖于 JavaScript。 这使您可以更改各种行星的速度、大小和距离。

您甚至可以相对轻松地在 3D 视图和俯视 2D 视图之间切换。 谈论前端开发的出色用途！

阴影立方体

这些简单的阴影立方体可能看起来并不多。 它们内置在 CSS 中，并使用 CSS3 动画自动在一个轴上旋转。

但是有一个交互式设置，您可以在鼠标悬停时为立方体设置动画。 这绝对是一个很酷的技巧，它依赖于一些罕见的 CSS 技术，包括:hover和:checked伪类以及tilde(~) selector 。

CSS 3D 轮播

图像轮播非常适合轮流展示图形、照片甚至视频。 通过这个 CSS3 轮播，您可以将这些有趣的滑块提升到一个全新的水平。

这个非常基本的 3D 轮播依赖于点击事件在不同元素之间进行动画处理。 3D 样式非常详细，完全依赖于 CSS 代码。

此处需要的唯一 JavaScript 是在下一个/上一个按钮之间切换以及将 3D 样式设置为动画。 这实际上是您可以在真实网站上使用的东西，因此它可能在现代网页设计中具有实际用途。

让狮子冷静下来

这是一些不太实用但使用起来仍然非常有趣的东西。 这个由 Karim Maaloul 制作的 3D 狮子渲染使用 Three.js 创建一个有趣的游戏，您可以在其中向汗流浃背的狮子吹一些凉气。

当您用光标在页面上移动扇形时，狮子的目光将跟随。 然后只需单击即可启动电动风扇，并在您向狮子送出凉爽的气流时观看狮子的兴奋。

开发人员甚至在狮子的鬃毛中创造了拍动区域以及胡须的运动。

这是另一个详细的例子，说明 3D 效果有多远。

3D NES 控制器

经典游戏在当前一代的编码器中留下了印记，您可以通过 Johan van Tongeren 的纯 CSS3 渲染的 3D NES 控制器看到这一点。

它在 Chrome/WebKit 浏览器中效果最好，尽管它在 Firefox 中也应该可以很好地呈现。 这更像是一个实验，看看 CSS 已经走了多远，所以不要指望它是完美的！

开普勒轨道

我无法想象建立这个开普勒轨道路径的现实模型需要多长时间。 该模型显示了一个物体在空间中相对于另一个物体的运动，在这种情况下，开发人员 Danie Clawson 做得非常出色。

整个模型将 CSS 用于视觉效果，将 Three.js 用于 3D 效果。 在左上角，您会找到一个选项框，您可以在其中更改许多轨道变量以影响对象的速度、大小和位置。

您甚至可能会注意到，轨道物体使用逼真的光线，并根据哪一侧指向太阳进行着色。 这是非常令人印象深刻的，并且由于对细节的极大关注而在此列表中排名第一。

我希望这些示例可以启发您更多地了解前端开发，甚至可以创建您自己的 3D 项目。