简单的旋转木马与CSS3

Question

我正在尝试使用CSS3（transform）创建3D Carousel。

但是，有一个问题。

请看下面的图片：

第一张图片是我当前代码的结果（喜欢从内部看轮播，也有错误：P），但我希望得到类似第二张图片的内容。 （看起来像是外面的旋转木马，而且没有错误！）

This是我的代码。

我可以为此目的使用度数的负值;但如果我这样做，左右div的高度将大于中心div。与this相似。

如何获得第二张图片？我应该使用哪些CSS转换代码？

Answer 1

你只需要反转透视角度;对于a1，您需要rotateY(-20)，对于c1，您需要rotateY(20)：

http://jsfiddle.net/thundercracker/upEC6/4/

编辑：

看到你的评论; div的高度会更大，因为div的边缘实际上更靠近你。如果你希望div看起来是完全相同的高度，你需要将它们的初始高度减少几个像素，或者将中心div的高度增加到“缩放”它，就像旋转的div的边缘'放大'一样”。当旋转角度反转时，您不会注意到高度差异，因为它很小。

编辑：

此外，div的远边缘比近边缘略小;如果你的div足够长，一个边缘将是屏幕的高度，然后其他的将是一个小点。

Answer 2

这是您想要的 Demo

修改 为了解决应用负变换旋转时的高度问题，您需要沿z轴提供 -ve平移以及 -ve和+ ve转换沿着X轴分别对着左右元素。

编辑： 有很多教程解释css3翻译的使用 我指的是其中一个

http://www.w3schools.com/css3/css3_2dtransforms.asp