CSS3“曲面”3D变换/透视帮助

Question

我正在尝试为我的网站创建一种透视人群效果。它实际上是一个装满平面图像的 ul，我想要创造出一种“弯曲”的感觉，就像一个圆形人群那样。它向内收缩，朝内部看起来更小，在两端向外弯曲。

海报圆形示例是我能找到的最接近的例子，链接在这里：http://www.webkit.org/blog-files/3d-transforms/poster-circle.html ，但我只需要“后面”，每个图像都是100px x 100px，每行23张图片，共四行。

我几乎完全不知道如何处理这个问题......我尝试了几种不同的方法，对每个图像应用唯一的-webkit-transform: rotateY(x) translateZ(x)，但从来没有达到过预期的效果（难以计算正确的值，或者完全使用了错误的东西），还尝试了修改透视效果。

- James

Answer 1

这是一个简单的“海报墙”，由9个div组成，所有的div都在一个包装的div内部绝对定位。

在包装的div中，你要添加：-webkit-transform-style:preserve-3d; 这就是实现3D效果的关键。根据所需的近视程度，您可以选择性地添加透视设置。

在CSS中，您需要创建一个左侧图像的样式，类似于以下内容：

-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已经得到广泛的跨浏览器支持。

- Michael Mullany

Answer 2

在我创建了以下内容后，发现这个可能对你有所帮助：http://jsfiddle.net/remybach/hpsJV/2/

其中的关键在于：

&: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);
}

- Remy

Answer 3

我在这里也稍微调整了一下：

http://jsfiddle.net/sJCAh/

虽然不完全符合那张多彩图片所展示的

:-)

- Simon

Answer 4

我知道这不完全是你想要的，但我只是随便拼凑了一下，想看看是否朝着大致的方向：

http://jsfiddle.net/cwolves/mwxNK/2/

- user578895