如何使用分层图案在CSS中创建3D图像

3D CSS has been around for a while. The earliest implementation of 3D CSS you can find is in one of W3C’s earliest specifications on 3D transforms in 2009. That’s exactly 15 years after CSS was introduced to the web in 1994, so it’s a really long time!

3D CSS 已经存在一段时间了。你可以找到的最早的 3D CSS 实现是在 W3C 的 最早的 3D 变换规范 中，时间是 2009 年。正好是在 1994 年 CSS 被引入网络 之后的 15 年，所以这真的是很长的时间！

A common pattern you would see in 3D transformations is the layered pattern, which gives you the illusion of 3D CSS, and this is mostly used with text, like this demo below from Noah Blon:

在 3D 转换中，您会看到一个常见的模式是 分层模式，它给您带来 3D CSS 的错觉，这主要用于文本，如下面 Noah Blon 的演示：

Or in Amit Sheen’s demos like this one:

或者在Amit Sheen的演示中像这样：

The layered pattern, as its name suggests, stacks multiple items into layers, adjusting the Z position and colors of each item with respect to their index value in order to create an illusion of 3D.

分层模式，顾名思义，将多个项目堆叠成层，调整每个项目的Z位置和颜色，以其索引值为依据，以创造3D的错觉。

Yes, most 3D CSS are just illusions. However, did you know that we can apply the same pattern, but for images? In this article, we will look into how to create a layered pattern for images to create a 3D image in CSS.

是的，大多数 3D CSS 只是幻觉。然而，你知道我们可以应用相同的模式，但用于图像吗？在这篇文章中，我们将探讨如何为图像创建分层模式，以在 CSS 中创建 3D 图像。

In order for you to truly understand how 3D CSS works, here’s a quick list of things you need to do before proceeding:

为了让你真正理解3D CSS是如何工作的，这里有一个快速列表，你需要在继续之前完成：

This layered pattern can be an accessibility problem because duplicated content is read as many times as its repeated. That’s true for text, however, for images this can be circumvented by just leaving all the but first alt attribute empty or setting all the duplicated divs with aria-hidden="true" (this one also works for text). This would hide the duplicated content from the user.

这种分层模式可能会成为可访问性问题，因为重复的内容会被读取多次。对于文本来说确实如此，然而，对于图像，这可以通过只将除了第一个 alt 属性外的所有属性留空，或者将所有重复的 div 设置为 aria-hidden="true" 来规避（这个方法对文本也有效）。这将使用户看不到重复的内容。

The HTML

HTML

Let’s start with the basic markup structure. We’re linking up an identical <img> over and over in mul...