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

Question

我原本要回答一个与JQuery标记有关的问题，但该问题已被关闭(超出主题)。我创建了一个fiddle来回答它。它正如我想要的那样工作，但旋转的div不像我想要的那样看起来。

它看起来像这样> 而不是这样> 到目前为止，我使用perspective和rotateY实现了旋转效果。我只需要在CSS方面得到帮助。

- Zword

---

我认为是同样的问题 css3-transform - CY5

Answer 1

您需要修改transform-origin点，可以尝试以下方法：

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

请参考这个实例： 演示http://jsfiddle.net/kzQFQ/185/

- DaniP

---

感谢@Zword编辑fiddle使两者都能正常工作，我没有时间做完整的回答:P - DaniP

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/

- VoronoiPotato

---

但是我需要这些div看起来像我在问题中展示的那样（after instead of）。 - Zword

然后修正你的视角来源。那个人是完全正确的，而你不必要地忽略了它。 - VoronoiPotato

正如我在下面的评论中所说，该答案仅解决了左侧div的问题。 - Zword

Answer 3

左侧区域

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

为右侧区域

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

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

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

- animack

Answer 4

只需添加scaleY(0.94)，如下所示：

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

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

- Nikola Nikolić

---

你的回答也不错，点赞！但我更喜欢被采纳的那个回答。 - Zword