3d CSS3“；曲面；三维变换/透视帮助

我正在尝试为我的网站创建一种透视人群。从字面上看，这是一个充满平面图像的ul，我想创造一种“弯曲”的感觉，就像一个圆形的人群。它向内，向内感觉更小，向两端弯曲

海报圈的例子是我能找到的最接近的例子，除了我不需要“正面”——只需要背面。每个图像为100px 100px，每行23个图像，共4行

---

我几乎完全不知道如何处理这个问题。。。我尝试了几种不同的方法来应用unique-webkit变换：旋转（x）平移（x）到每个图像，但从来没有达到目的（努力计算正确的值，或者完全使用错误的东西），以及使用透视图。

我知道这并不完全是你想要的，但是把这些放在一起，想看看它是否在大方向上：

这是一个带有9个分区的简单“海报墙”——所有分区都绝对位于包装分区内

在包装器div中，添加：-webkit变换样式：preserve-3d；这就是实际创建3D效果的原因。根据所需的缩短程度，可以选择添加透视设置

在CSS中，您可以为左侧图像创建如下所示的div样式：

-webkit-transform: rotateX(0deg) rotateY(30deg) rotateZ(0deg);
-webkit-transform-origin: 100% 0%;

-webkit-transform: rotateX(0deg) rotateY(-30deg) rotateZ(0deg);
-webkit-transform-origin: 0% 0%;

对于右侧图像：

-webkit-transform: rotateX(0deg) rotateY(30deg) rotateZ(0deg);
-webkit-transform-origin: 100% 0%;

-webkit-transform: rotateX(0deg) rotateY(-30deg) rotateZ(0deg);
-webkit-transform-origin: 0% 0%;

注意：目前只有Safari和iOS支持preserve-3D。对于其他浏览器，您必须通过手动缩放和倾斜图像来手动添加透视图，而且它看起来永远不会完全正确

---

2014年更新：现在跨浏览器广泛支持preserve-3D

我在这里的版本中也对其进行了一些调整：

但这张彩色图片所展示的并不完全是这样

---

：-）

在创建了以下可能对您有所帮助的内容后，才发现了这一点：

其实质在于：

&:nth-of-type(3n+1) { /* col 1 */
    transform:rotateY(20deg) translateZ(-30px);
}
&:nth-of-type(3n+2) { /* col 2 */
    transform:translateZ(-90px);
}
&:nth-of-type(3n+3) { /* col 3 */
    transform:rotateY(-20deg) translateZ(-30px);
}