3D在JQuery幻灯片中使用透视旋转

Question

我打算回答一个标记为JQuery的问题，该问题已关闭（非主题）。我创建了一个fiddle来回答它。它正如我所希望的那样工作，但是旋转的div看起来并不像我想要的那样。

看起来像＆gt;

取代此＆gt;

我正在使用perspective和rotateY来实现我迄今为止所实现的旋转效果。我只需要CSS中的帮助。

Answer 1

您需要修改transform-origin点，试试这个：

-webkit-transform-origin: 0 0;
-webkit-transform-origin: 100% 0;

看到这个小提琴： 演示http://jsfiddle.net/kzQFQ/185/

Answer 2

您的容器不够大，不适合透视＆旋转div。因此它被砍掉了。 （内容容器上也需要保证金以便将其缩小）

.wrapper {
position: relative;
width: auto;
margin-top:40px;
height: 600px;
top: 0;
left: 0;
overflow: hidden;
perspective: 800px;
-moz-perspective: 800px;
-webkit-perspective: 800px;
-webkit-perspective-origin: 50% 100px;
}

http://jsfiddle.net/fgM49/

Answer 3

只需添加scaleY（0.94），如

-webkit-transform: rotateY(30deg) rotateY(30deg);

以下是演示http://jsfiddle.net/kzQFQ/190/

Answer 4

表示左div

-webkit-transform: perspective(100px) rotateY(30deg);

为右div

-webkit-transform: perspective(100px) rotateY(-30deg);

对于crossbrowser支持，您可以使用http://ricostacruz.com/jquery.transit/

$('').transition({
  perspective: '100px',
  rotateY: '30deg'
});