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

Question

我想为我的网站创建一种透视人群。这实际上是一个完整的平面图像，我想创建一个“弯曲”的感觉，像一个圆形的人群。它向内并且朝内侧看起来更小，并朝向末端弯曲。

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

我几乎完全丧失了如何解决这个问题......我已经尝试了几种应用独特-webkit-transform的不同方式：rotateY（x）translateZ（x）给每个图像，但从来没有到达那里（努力计算正确的价值观，或完全使用错误的东西），以及玩弄视角。

Answer 1

我知道这是不是正是你想要的，但只是把这个一起，想看看它在大方向：

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

Answer 2

这是一个简单的“海报墙“与9个divs - 所有的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版现在支持保存-3D。对于其他浏览器，您必须通过手动缩放和倾斜图像来手动添加透视图，并且它看起来绝对不正确。

2014更新：保存-3D支持现在

Answer 3

我跟我的版本在这里调整了一点点过于广泛的跨浏览器：

http://jsfiddle.net/sJCAh/

不正是丰富多彩的PIC表明虽然

:-)

Answer 4

在创建以下内容后可能会对您有所帮助：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); 
}