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 >

enter image description here

Instead of this >

enter image description here

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

i think same question [css3-transform][1] [1]: http://stackoverflow.com/questions/5293736/css3-transform-skew — CY5, Dec 26 '13 at 15:47

score 7 · Accepted Answer · edited Dec 26 '13 at 16:30

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/

edited Dec 26 '13 at 16:30

Zword

6,605
3
27
52

answered Dec 26 '13 at 15:38

DaniP

37,813
8
65
74

1

Thaks @Zword for edit the fiddle to make both work i was without time to make the full answer :P – DaniP Dec 26 '13 at 16:58

VoronoiPotato · Answer 2 · 2013-12-26T15:47:10.557

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/

edited Dec 26 '13 at 15:47

answered Dec 26 '13 at 15:34

VoronoiPotato

3,113
20
30

But i need the divs to look like as i showed it in the question(after instead of) – Zword Dec 26 '13 at 15:35
then fix your perspective origin. The other guy was completely right and you needlessly disregarded it. – VoronoiPotato Dec 26 '13 at 15:47
As i told in the comment below that answer it solves the problem for left div only – Zword Dec 26 '13 at 15:50

score 2 · Answer 3 · answered Dec 26 '13 at 15:56

for left div

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

for right div

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

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

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

score 2 · Answer 4 · answered Dec 26 '13 at 16:09

2

Just add scaleY(0.94) like

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

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

answered Dec 26 '13 at 16:09

Nikola Nikolić

356
2
17

Your answer is also good.+1 for that. But I like more the accepted answer fiddle. – Zword Dec 26 '13 at 16:13

3D Rotate using perspective in JQuery Slideshow

4 Answers4