CSS3＆QUOT;曲面＆QUOT; 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.

海报圈的例子是最接近我能找到<一href="http://www.webkit.org/blog-files/3d-transforms/poster-circle.html">http://www.webkit.org/blog-files/3d-transforms/poster-circle.html但我并不需要的前 - 刚刚回来。每幅图像是100像素x 100像素，每行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.

我是pretty的多一个完整的损失如何处理这个...我已经尝试运用独特的几种不同的方式-webkit-变换：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.

在包装格，添加：-webkit-变换式：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中，您将创建分区的造型，看起来像这样的左手照片：

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的支持preserve-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＆QUOT;曲面＆QUOT; 3D变换/透视帮助的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！