CSS3“曲面"3D 变换/透视帮助 [英] CSS3 "Curved Surface" 3D Transform/Perspective Help

问题描述

我正在尝试为我的网站创建一种有远见的人群.它实际上是一个充满平面图像的 ul，我想创造一种弯曲"的感觉，就像一个圆形的人群.它向内，向内明显较小，向末端弯曲.

I'm trying to create a sort of perspective crowd for my website. It's literally a ul full of flat images, and I want to create a "curved" feel like a rounded crowd. Where it's inwards and perceptively smaller towards the inside and curves out towards the ends.

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

The poster circle example is the closest I can find http://www.webkit.org/blog-files/3d-transforms/poster-circle.html except I don't need the "front" - just the back. Each image is 100px x 100px, 23 images per row and four rows.

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

I'm pretty much at a complete loss as to how to approach this... I've tried a few different ways applying unique -webkit-transform: rotateY(x) translateZ(x) to each image but never quite getting there (struggling with calculating the right values, or using the wrong thing entirely), as well as playing with perspective.

推荐答案

这是一个简单的海报墙"，有 9 个 div - 所有 div 都绝对定位在一个包装 div 内.

This is a simple "poster wall" with 9 divs - all the divs are absolutely positioned within a wrapper div.

在包装器 div 中，添加:-webkit-transform-style:preserve-3d;这就是实际创建 3D 效果的原因.您可以根据所需的透视程度选择添加透视设置.

In the wrapper div, you add: -webkit-transform-style:preserve-3d; This is what actually creates the 3D effect. You can optionally add a perspective setting depending on the degree of foreshortening you want.

在 CSS 中，您为左侧图像创建如下所示的 div 样式:

And in the CSS, you create div styling that looks like this for the left hand images:

-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.对于其他浏览器，您必须通过手动缩放和倾斜图像来手动添加透视图，而且看起来永远不会完全正确.

NOTE: Only Safari and iOS support preserve-3D right now. For other browsers, you'll have to manually add perspective by manually scaling and skewing the images, and it never looks exactly right.

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

2014 Update: preserve-3D is supported widely cross browser now

这篇关于CSS3“曲面"3D 变换/透视帮助的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！