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

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

Web Designer Toolbox 
Unlimited下载:500,000多个Web模板,主题,插件和设计资产

现在下载

 

开普勒轨道

 

我无法想象建立这个开普勒轨道路径的现实模型需要多长时间。这个模型显示了一个身体相对于另一个身体在太空中的运动,在这种情况下,开发人员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

图像轮播非常适合展示图形,照片甚至是旋转视频。通过这个CSS3旋转木马,您可以将这些有趣的滑块带到一个全新的水平。

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

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

冷静狮子

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

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

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

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

3D NES控制器

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

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

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