网络已经从拨号互联网和GeoCities页面走了很长一段路。网站现在具有完全响应能力，可通过触摸屏设备访问。但现代浏览器已经超越了“主流”网页设计。

只使用前端技术就可以在浏览器中创建出色的3D效果。在这篇文章中，将展示最受欢迎的3D网络项目，它们展示了网络在短短几十年内的发展程度。

开普勒轨道

我无法想象建立这个开普勒轨道路径的现实模型需要多长时间。这个模型显示了一个身体相对于另一个身体在太空中的运动，在这种情况下，开发人员Danie Clawson做了一项令人难以置信的工作。

整个模型使用CSS进行视觉效果，使用Three.js进行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的屏幕播放在Apple的服务器上托管的mp4视频，它也在视角上正确扭曲。

对此最疯狂的是它如何完全依赖于CSS。当纯CSS3 iPhone在浏览器中完全交互时，我将在另外10年内感到很兴奋。

3D太阳系

银河系是我们宇宙中的小角落，它完全由朱利安·加尼尔创造的这支惊人的钢笔代表。

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

您甚至可以相对轻松地在3D视图和头顶2D视图之间切换。谈谈前端开发的一流使用！

阴影立方体

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

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

CSS 3D Carousel

这个非常基本的3D轮播依赖于点击事件来在不同元素之间制作动画。3D风格非常详细，完全依赖于CSS代码。

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

冷静狮子

这里的东西有点不太实用，但仍然非常有趣。这款3D狮子由Karim Maaloul 渲染，使用Three.js创造一个有趣的游戏，你可以在汗水的狮子身上吹出一些凉爽的空气。

当您用光标在页面上移动风扇时，狮子的注视将随之而来。然后点击启动电动风扇，观察狮子的兴奋，当你发送一股凉爽的空气流。

开发商甚至开始在狮子的鬃毛中创造扑动区域以及胡须中的运动。

这是3D效果到底有多远的另一个详细示例。

3D NES控制器

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

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

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