3d - CSS3 "Curved Surface"3D 变换/透视帮助

Question

我正在尝试为我的网站创建一种观点人群。它实际上是一个充满平面图像的 ul，我想创造一种像圆形人群一样的“flex ”感觉。它向内，向内明显变小，向两端 flex 。

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

对于如何处理这个问题，我几乎完全不知所措......我尝试了几种不同的方法，将 unique -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 支持 preserve-3D。对于其他浏览器，您必须通过手动缩放和倾斜图像来手动添加透视图，而且它看起来永远不会完全正确。

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