怎么使用CSS3D变换创建等距布局
这篇文章将为大家详细讲解有关怎么使用CSS 3D变换创建等距布局,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
创新互联成立于2013年,先为礼县等服务建站,礼县等地企业,进行企业商务咨询服务。为礼县企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。
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变换创建等距布局”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。
当前名称:怎么使用CSS3D变换创建等距布局
浏览地址:http://scyanting.com/article/goiohj.html