javascript - 变换导致 div 消失

Question

我正在用 CSS3 和 jQuery 创建一个 3d 轮播。这是我的代码。

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

-webkit-transform: rotateY(20deg) ;

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

Answer 1

这是一个非常有趣的问题。我正在使用谷歌浏览器并且尚未在 Safari 中进行测试，但似乎至少 Chrome 似乎在使用 -webkit-transform 时创建了一个新的绘画堆栈。如果你注意到，<div class="main">不再有高度。就好像元素的内容已经从它们的父元素中抽象出来了。

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

Answer 2

问题是您在 .main 上的 -1000px 边距。如果你摆脱它，你可以开始对那个 DOM 元素应用旋转。

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

尝试使用负度旋转。