在 JQuery 幻灯片中使用透视图进行 3D 旋转答案

【问题标题】：3D Rotate using perspective in JQuery Slideshow在 JQuery 幻灯片中使用透视图进行 3D 旋转
【发布时间】：2014-01-09 05:08:31
【问题描述】：

我打算回答一个标记为 JQuery 的问题，该问题已关闭（离题）。我创建了一个 fiddle 来回答它。它按我想要的方式工作，但是旋转的 div 看起来不像我想要的那样。

看起来像 >

而不是这个>

到目前为止，我使用perspective 和rotateY 来实现旋转效果。我只需要 CSS 方面的帮助。

【问题讨论】：

我认为同样的问题 [css3-transform][1] [1]: stackoverflow.com/questions/5293736/css3-transform-skew

标签： jquery html css

【解决方案1】：

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

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

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

【讨论】：

Thaks @Zword 编辑小提琴以使这两项工作我没有时间做出完整的答案：P

【解决方案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/

【讨论】：

但我需要 div 看起来像我在问题中展示的那样（之后而不是）
然后修正你的透视原点。另一个人是完全正确的，你没必要忽视它。
正如我在下面的评论中所说的那样，它只解决了左 div 的问题

【解决方案3】：

对于左 div

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

右div

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

对于跨浏览器支持，您可以使用http://ricostacruz.com/jquery.transit/

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

【讨论】：

【解决方案4】：

只需添加 scaleY(0.94) 即可

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

这里是演示http://jsfiddle.net/kzQFQ/190/

【讨论】：

你的回答也不错。+1。但我更喜欢公认的答案小提琴。