我正在尝试为我的网站创建一种有观点的人群。它实际上是一个充满平面图像的 ul，我想创建一种“弯曲”的感觉，就像圆形的人群一样。它向内并且向内明显变小，并向末端弯曲。
海报圈的例子是我能找到的最接近的http://www.webkit.org/blog-files/3d-transforms/poster-circle.html http://www.webkit.org/blog-files/3d-transforms/poster-circle.html但我不需要“前面”——只需要后面。每个图像为 100px x 100px，每行 23 个图像，共四行。
我几乎完全不知道如何解决这个问题...我尝试了几种不同的方法，将独特的 -webkit-transform:rotateY(x)translateZ(x) 应用于每个图像，但从未完全实现（努力计算正确的值，或者完全使用错误的东西），以及玩弄观点。
这是一个简单的“海报墙”，有 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 现在广泛支持跨浏览器
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
