css创建一个3d空间_如何使用CSS 3D变换创建等距布局

css创建一个3d空间

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

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

等轴测投影

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

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

Z轴

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

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

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

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

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

HTML

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

<div class="row">
	<div class="column">
		<div class="ItemCard">
			<a class="ItemCard__dest cover" href="https://elements.envato.com/items/type/fonts/herbert-lemuel-GHH8KT" target="_blank"></a>
			<figure class="ItemCard__thumb">
				<img src="./images/001.jpg" height="340" width="510" alt="">
				<span class="shadow cover"></span>
			</figure>
		</div>
	</div>
	<div class="column">
		<div class="ItemCard">
			<a class="ItemCard__dest cover" href="https://elements.envato.com/items/type/add-ons/roller-paint-brush-EZ9ZVZ" target="_blank"></a>
			<figure class="ItemCard__thumb">
				<img src="./images/002.jpg" height="340" width="510" alt="">
				<span class="shadow cover"></span>
			</figure>
		</div>
	</div>
	<!-- 7 more items... -->
</div>

CSS

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

html {
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
}
img {
    max-width: 100%;
    height: auto;
    display: block;
}
figure {
    margin: 0;
}

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

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

.row {
    width: 960px;
    display: flex;
    flex-wrap:wrap;
    justify-content:flex-end;
    transform: rotateX(60deg) rotateY(0deg) rotateZ(-45deg);
}
.column {
    padding:20px;
    width:50%;
    max-width: 50%;
    flex: 1 1 50%;
}

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

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

.row,
.column,
.ItemCard,
.ItemCard__dest,
.ItemCard__thumb {
    position: relative;
    backface-visibility: hidden;
    transform-style: preserve-3d;
}

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

.cover {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

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

图像样式

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

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

.ItemCard__thumb img {
    position: relative;
    z-index: 1;
    transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    transform: translate3d(0, 0, 20px);
}

阴影样式

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

.shadow {
    display: block;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    opacity: .9;
    background-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.1);
}

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

悬停效果

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

.column:hover .ItemCard__dest {
    z-index: 10;
}
.column:hover .ItemCard__dest,
.column:hover .ItemCard__thumb img {
    transform: translate3d(0, 0, 50px) rotateX(-5deg);
    transform-origin: center bottom;
}
.column:hover .ItemCard__thumb .shadow {
    opacity: .6;
    background-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 10px 6px rgba(0, 0, 0, 0.1);
}

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

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

结语

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

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

更多资源

• 三维冒险：CSS 3D变换

翻译自: https://webdesign.tutsplus.com/tutorials/create-an-isometric-layout-with-3d-transforms--cms-27134

css创建一个3d空间