20个令人惊叹的CSS 3D变换示例

圆角,渐变和阴影是众所周知的特征CSS3但除此之外还有CSS过渡,变换和动画。结合起来,它们创造了前所未有的效果。

CSS 3D变换流畅,硬件加速且易于实现,浏览器正在进行非常难以进行的透视计算。它们自2009年以来一直存在,并且在Safari和Chrome中得到支持,很快就在Firefox 10和Internet Explorer 10中得到支持。它们在iOS设备上表现出色,甚至在iPhone 3G和iPad上也是如此。

这里有一些很棒的例子可以帮助您入门并展示CSS新发现的力量和优雅。

01.了解CSS 3D变换

在他的文章中了解CSS 3D变换Dirk Weber解释了使用3D变换创建内容所需的步骤。有一个非常简单的蝴蝶动画和一个沙盘用于搞乱变换属性,这是一个开始的好地方。

CSS 3D transforms: Understanding CSS 3D transforms

02. 3D立方体

从基础知识开始,3D变换通常用于将元素重新排列为几何形状。在我的实验中,六个立方体面形成一个长方体。奖励包括单击和拖动以及手势支持以旋转立方体。

CSS 3D transforms: 3D cube

03.处理3D几何体

您可能已经注意到在第一个多维数据集中,当它完全旋转时,鼠标交互是相反且不直观的,多维数据集以错误的方式移动。乔兰伯特解释道如何通过使用WebKitCSSMatrix来确定正确的旋转矢量来避免这些陷阱。聪明的东西!

CSS 3D transforms: Handling 3D geometry

04.自然物体旋转

3D几何很难。德克的轮换例子通过引入“虚拟轨迹球”来处理自然的3D旋转,这是一个虚拟的球体,可以映射鼠标点击以创建3D物体的平滑直观旋转。他演示了一个可爱的包装镜头和反射。

CSS 3D transforms: Natural object-rotation

05. Poster Circle和Morphin的Power Cubes

几乎与CSS 3D一样古老的变形,这些例子展示他们的力量和简洁。该博客文章介绍了变换,其中包含3D变换规范的概述,包括背面可见性和变换样式的详细信息。

CSS 3D transforms: Poster Circle and Morphin’ Power Cubes

06. 3D球体和四面体

在3D空间中布置元素可以导致各种形状。围绕Y轴排列成圆形的元素列表和围绕X轴排列的一组元素创建了一个。可以使用边框宽度/边框颜色技巧构建CSS三角形,其中四个可以构建一个四面体

CSS 3D transforms: 3D Sphere and Tetrahedron

07. 3D FPS概念

这个实验Keith Clark仅使用HTML和CSS测试3D环境的可行性。使用W和S键和鼠标在这个基本但非常酷的第一人称射击游戏中的办公室中移动。它在Safari中效果最好。请务必查看源代码。

CSS 3D transforms: A 3D FPS concept

08. VR

在类似的主题上,Apple也有自己的主题Safari技术演示它将视口定位在多维数据集内以创建虚拟场景。使用鼠标单击并拖动并浏览Apple商店。该演示链接到许多有用的Safari资源,例如出色的视觉效果指南。

CSS 3D transforms: VR

作为Apple技术展示的一部分,他们创造了一个图像库完成转换和转换,2D和3D。单击图像上的下一个和上一个以旋转3D图像轮播。这里有许多微妙的细节,例如当选择另一个时图像淡出和模糊。

CSS 3D transforms: Web Gallery

10.照片过渡

与所有Apple演示一样,最好在Safari中查看。这些过渡真实地说明了3D CSS在您的网页上创建独特但直观的用户交互的能力。这里的图像以令人印象深刻的幻灯片形式折叠,放大和淡出。 CSS源包含值得研究。

CSS 3D transforms: Photo Transitions

11.助焊剂

Joe Lambert创建了许多聪明的图像到图像过渡,其中一些使用3D变换。他非常友好地将这些插件捆绑成一个有用的WordPress插件助焊剂。现在,您可以快速将这些很酷的动画放入您的博客中。

CSS 3D transforms: Flux

12.雪堆

作为Snow Leopard硬件加速3D变换的一个例子,Charles Ying发布了这个华丽的图像画廊名为Snow Stack。使用箭头键沿墙和空格键移动以突出显示图像。它表现出色,使用起来非常愉快。这是3D变换的最佳状态。

CSS 3D transforms: Snow Stack

13. CSS3 Time Machine

Joe Critchley采用了Apple的时间机器界面,并用HTML和CSS复制它图像幻灯片。它可以很好地激活前视图,淡出最前面的图像以显示后面的图像。一些键盘交互也会有很长的路要走。

CSS 3D transforms: CSS3 Time Machine

14.矩阵革命

在Dirk Weber的3D变换系列中,他深入研究了复杂的世界矩阵变换(-webkit-transform:matrix3d)创建时尚的封面流效果。和以前一样,有一个用于播放属性的沙箱;这个时间的矩阵值和观点。警告,需要一些数学。

CSS 3D transforms: The Matrix Revolutions

15. Wonder Webkit

以色列帕斯特拉纳也使用复杂的矩阵变换,这一次创建了一个奇迹墙。当你将鼠标移到书本封面上时,表面会响应并扭曲。单击一本书可放大样式的详细视图。这里的矩阵库和JavaScript特别值得深入研究。

CSS 3D transforms: Wonder Webkit

16. BigText

Zach Leatherman创造了出色的作品BigText JQuery插件这使文本适合一定的宽度,以实现漂亮的垂直对齐。它也捆绑了3D,所以你的华丽类型可以淡入远方,就像星球大战前言一样,如果你愿意的话。使用演示的随机3D设置进行播放,看看有什么可能。

CSS 3D transforms: BigText

17. Reeder For Mac

访问里德尔在Safari中使用RSS应用程序(RSS应用程序的新生命)并使用它们的导航。你会看到他们的盒状徽标神奇地反弹并以非常流畅的动画旋转到不同的视图。行动中3D CSS的一个很好的例子。

CSS 3D transforms: Reeder for Mac

18.恐慌 - 传播

Mac应用程序设计的另一个堡垒,Panic,使用了快速但聪明的卡片翻转效果在屏幕截图和传输4功能列表之间切换。在这里,3D变换增加了一点点类,在网络上再现原生应用效果。

CSS 3D transforms: Panic — Transmit

19. Beercamp 2011

由nclud建造,这是SXSW Beercamp 2011的入门体验在滚动或导航时,使用3D变换在内容层中传播。 z轴的简单转换产生了很大的效果,对于缺乏支持的浏览器具有巧妙的2D转换后备。 3D检测使用Modernizr。

CSS 3D transforms: Beercamp 2011

20. IPhone / IPad上的3D旋转分子

作为一个令人愉快的不同应用程序,jackadam使用3D变换渲染复杂分子结构,可以使用鼠标或手势旋转。文章重点介绍了3D CSS在画布上的一些优势,即iPad上的硬件加速(虽然iOS5对此进行了改进)。

CSS 3D transforms: 3D Rotating Molecules on the iPhone/iPad

什么样的CSS 3D变换示例给您留下了最深刻的印象?哪些应该成为我们的名单?让我们在评论中知道!

保罗海耶斯设计和建立乐趣使用的网站。他在Last.fm工作,住在布莱顿的海边。找到他的最佳地点是Twitter,@ fofr,在那里他谈论UX,HTML,CSS和JavaScript,以及其他很酷的东西。

喜欢这个?阅读这些!



翻译字数超限