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

问题描述

我想为我的网站创建一种透视人群。它的字面上是一个充满平整的图像，我想创建一个弯曲的感觉像一个圆形的人群。

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 不需要前面 - 只是后面。每个图片都是100像素x 100像素，每行23张图片和4行。

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.

我几乎完全失去了如何处理这个问题。 ve尝试了几种不同的方式应用独特的-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都是绝对定位在一个wrapper 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屋！