3D Rotate using perspective in JQuery Slideshow

Question

I was going to answer a question tagged JQuery which got closed(off-topic).I created a fiddle to answer it. It is working just as I wanted it to, but the rotated divs do not look as I wanted them to.

It looks like >

Instead of this >

I am using perspective and rotateY for the rotate effect I have achieved till now. I just need help in CSS for this.

Answer 1

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/

Answer 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)

.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/