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

Question

我正试图为我的网站创建一种视角观众。它实际上是一个充满平面图像的ul，我想创造一个像圆形人群一样的“弯曲”感觉。它向内并且在内部看起来更小并且朝向末端弯曲。

海报圈示例是我能找到的最近的http://www.webkit.org/blog-files/3d-transforms/poster-circle.html，除了我不需要“前面” - 只是背面。每幅图像为100px x 100px，每行23幅图像和4行。

我几乎完全失去了如何处理这个......我尝试了几种不同的方法将唯一的-webkit-transform：rotateY（x）translateZ（x）应用到每个图像但从未完全到达那里（努力计算正确的价值观，或完全使用错误的东西），以及玩视角。

Answer 1

这是一个简单的“海报墙”，有9个div - 所有div都绝对位于包装div中。

在包装器div中，添加：-webkit-transform-style：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%;

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

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

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

Answer 3

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

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

Answer 4

我在这里用我的版本稍微调整了一下：

http://jsfiddle.net/sJCAh/

不完全是彩色照片演示的内容

： - ）