html - 使用 CSS3 的简单轮播

Question

我正在尝试使用 CSS3 ( transform) 创建一个 3D 轮播。

但有个问题。

看看下面的图片：

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

这是我的代码。

为此，我可以使用度数的负值；但如果我这样做，左右divs 的高度将大于 center div。像这样。

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

Answer 1

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

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

编辑：

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

编辑：

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

Answer 2

这是您想要的工作演示

编辑： 为了解决应用负变换 rotate的高度问题，您需要沿 z 轴进行-ve 平移以及沿 X 轴分别对左右元素进行 -ve 和 +ve 平移。

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

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