使用JQuery幻灯片中的透视图进行3D旋转-3DRotateusingperspectiveinJQuerySlideshow

7  

You need to modify the transform-origin point, try this:

你需要修改转换原点，试试这个:

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

See this fiddle: The demo http://jsfiddle.net/kzQFQ/185/

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

2  

Your containers are not large enough for the perspective'd and rotated div. Consequently it gets chopped off. (Margins are also needed on the content-container to scoot them down)

您的容器不够大，无法容纳透视图和旋转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/

http://jsfiddle.net/fgM49/

2  

Just add scaleY(0.94) like

只需添加写入scaleY(0.94)

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

Here is the demo http://jsfiddle.net/kzQFQ/190/

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

1  

for left div

为左div

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

for right div

为正确的div

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

for crossbrowser support you can use http://ricostacruz.com/jquery.transit/

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

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