变换导致div消失

Question

我正在使用CSS3和jQuery创建一个3D轮播。 This是我的代码。

目前，我的问题是，如果我将这行css代码设置为main类，则所有内容的位置和缩放都将更改：

-webkit-transform: rotateY(20deg) ;

我的问题是，如何在不进行任何其他更改的情况下轮换main类？

Answer 1

这是一个非常有趣的问题。我正在使用Google Chrome并且尚未在Safari中进行过测试，但似乎至少Chrome在使用-webkit-transform时似乎会创建一个新的绘图堆栈。如果您注意到，<div class="main">不再有高度。就好像元素的内容是从父母那里抽象出来的。

在任何情况下，我注意到如果你给它一个静态高度而不是一个百分比（如500px），并且如果你删除负边距（它似乎没有做任何事情），它会再次变得可见。 p>

Answer 2

问题是.main上的-1000px余量。如果你摆脱它，你可以开始将旋转应用到那个DOM元素。

http://jsfiddle.net/upEC6/53/

尝试使用负度旋转。