怎么使用CSS 3D变换创建等距布局

这篇文章将为大家详细讲解有关怎么使用CSS 3D变换创建等距布局，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

　　css创建一个3d空间

　　我们从Envato的最新倡议中汲取了本教程的灵感； Envato元素 。 Elements的主页提供了一系列创意产品（ 字体 ， 图标 ， 图形模板等），它们以整洁的等距网格布局一起显示。

　　我们将使用CSS 3D变换来重新创建此等轴测图。

　　“等轴测投影”是一种以明显的三个维度呈现设计的方法（通常在80年代和90年代的工程和游戏中使用，3D处理能力非常有限）。

　　这不是我们在现实生活中遇到的三个维度，它们在其显示的平面上没有透视感。

　　多年来，网络一直是二维环境，我们习惯于沿两个轴或方向（x轴（水平）和y轴（垂直））定位元素。

　　注意 ：腹板的y轴与原始笛卡尔坐标原理相反，因为腹板是从上到下读取的。

　　投影3D视图需要第三轴，即z轴。 该轴表示深度 ，并且对象沿z轴的移动方向相对于我们的观点； 它可能上下，上下或近距离移动。

　　这三个轴可以应用于CSS变换功能以创建3D投影。 在下面的演示中，我们使用 和函数创建一个矩形的等角投影：

　　现在我们有了等轴测投影基础的基本原理，我们可以将其付诸实践。 我们从HTML开始。

　　与Envato Elements主页类似，我们具有网格布局。 我们的网格包括一行九列。 每列都包含一个产品图片，指向产品页面的链接，以及如下所示的元素，我们将使用该元素对图像阴影进行建模。

　　我们从重置某些元素的默认样式的样式开始。

　　这些样式使用设置所有元素，这将使确定元素的总大小更容易预测。 我们还将图像渲染设置为以删除图像底部的空白。 最后，我们删除包裹图像的元素边距。

　　然后，我们继续行和列的样式。

　　上面的样式将行设置为 ，将变换样式设置为3D，以便浏览器将正确遵循z轴变换，旋转行以创建等轴测视图，最后将行中的列分成两半。

　　接下来，我们必须添加在3D视图中放置行和列的子元素的样式。 这种跟随风格至关重要。 必须在下包装的每个元素上声明   ，以便可以在3D空间（特别是在Firefox中）正确渲染它们，并且Z轴将生效。

　　接下来，我们将样式添加到类（已添加到产品链接锚标记中）和元素（不久将成为阴影）中。

　　添加了此样式后，产品链接以及元素现在一直延伸到整个容器。 我们还可以稍后更改元素堆栈的位置。

　　以下样式控制图像包装器元素的位置，填充和一些3D素材。 设置了 ，因此我们将看不到平移或旋转元素下方的堆栈，也看不到图像的反面。

　　我们对图像应用过渡，并在z轴上移动以使其“悬浮”在阴影上方 。 同样，我们还添加了一些3D内容： 和 ，因此它将正确渲染3D视图。

　　以下是我们的阴影样式。 由于此时的图像距离反射阴影的“地板”较近（  ），因此阴影散布应较窄，阴影阴影应较暗。

　　我们已经取得了一些进展：

　　悬停效果将使每个图像缩略图更具吸引力。

　　在悬停状态下，如上面的代码片段所示，我们将首先将元素堆栈上移更高，因此图像（和链接）将出现在网格中其余项目的上方。

　　我们还将略微提升图像； 将其从“地板”移开，并更靠近“光源”。 据说阴影应该失去一些清晰度，因此我们降低了阴影的不透明度。

　　在本教程中，我们在CSS中使用了3D变换来构建Envato Elements等距网格的副本。 我们还学习了如何在阴影和光源方面增加真实感。 看一下演示 ，获取源文件 ，然后让我们知道您对它们的处理方式！

　　3D变换是功能强大CSS实用程序。 但不要认为它们只是在网络上添加花式层的a头或玩具。 如果认真应用，3D元素还可以解决一些臭名昭著的设计问题 。

关于“怎么使用CSS 3D变换创建等距布局”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。