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

【问题标题】：CSS3 "Curved Surface" 3D Transform/Perspective HelpCSS3“曲面”3D变换/透视帮助
【发布时间】：2011-07-27 01:31:34
【问题描述】：

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

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

对于如何处理这个问题，我几乎完全不知所措...我尝试了几种不同的方法，将独特的 -webkit-transform: rotateY(x) translateZ(x) 应用于每个图像，但从来没有完全到达那里（努力计算正确的值，或完全使用错误的东西），以及玩透视。

【问题讨论】：

标签： 3d webkit css transform

【解决方案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 支持 preserve-3D。对于其他浏览器，您必须通过手动缩放和倾斜图像来手动添加透视图，而且它看起来永远不会完全正确。

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

【讨论】：

【解决方案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);
}

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

http://jsfiddle.net/sJCAh/

这并不完全是彩色图片所展示的内容

:-)

【讨论】：