CSS/JQUERY 플립 전환 효과 전환 방향

Question

현재 전환 효과는 왼쪽에서 오른쪽으로 슬라이드됩니다. 그리고 내가 어떻게 그것이 위에서 아래로가는 것처럼 보일 것인가?

.flip { 
    -webkit-backface-visibility:hidden; 
    -webkit-transform:translateX(0); 
    -moz-backface-visibility:hidden; 
    -moz-transform:translateX(0); 
} 
.flip.in.reverse { 
    -webkit-animation-name: flipintoleft; 
    -moz-animation-name: flipintoleft; 
} 
@-webkit-keyframes flipouttoleft { 
    from { -webkit-transform: rotateY(0); } 
    to { -webkit-transform: rotateY(-90deg) scale(.9); } 
} 
@-moz-keyframes flipouttoleft { 
    from { -moz-transform: rotateY(0); } 
    to { -moz-transform: rotateY(-90deg) scale(.9); } 
} 
@-webkit-keyframes flipouttoright { 
    from { -webkit-transform: rotateY(0) ; } 
    to { -webkit-transform: rotateY(90deg) scale(.9); } 
} 
@-moz-keyframes flipouttoright { 
    from { -moz-transform: rotateY(0); } 
    to { -moz-transform: rotateY(90deg) scale(.9); } 
} 
@-webkit-keyframes flipintoleft { 
    from { -webkit-transform: rotateY(-90deg) scale(.9); } 
    to { -webkit-transform: rotateY(0); } 
} 
@-moz-keyframes flipintoleft { 
    from { -moz-transform: rotateY(-90deg) scale(.9); } 
    to { -moz-transform: rotateY(0); } 
} 
@-webkit-keyframes flipintoright { 
    from { -webkit-transform: rotateY(90deg) scale(.9); } 
    to { -webkit-transform: rotateY(0); } 
} 
@-moz-keyframes flipintoright { 
    from { -moz-transform: rotateY(90deg) scale(.9); } 
    to { -moz-transform: rotateY(0); } 
} 

Answer 1

여기 당신은 간다 : 여기 http://jsfiddle.net/lakario/VPjX9/

가 CSS 코드의 일부입니다 : 여기

코드입니다!

http://jsfiddle.net/VPjX9/289/

나는 그것을 할 수있는 청소기 방법이있을거야,하지만 난 그냥 X를 회전하여 CSS의 회전 Y 값을 변경, 그래서는 X 축을 따라입니다.

예 : 가 하였다

@-moz-keyframes flipintoleft { 
from { -moz-transform: rotateX(-90deg) scale(.9); } 
to { -moz-transform: rotateY(0); }} 

지금이다

대신 rotateY을 사용

@-moz-keyframes flipintoleft { 
from { -moz-transform: rotateX(-90deg) scale(.9); } 
to { -moz-transform: rotateY(0); }} 

Answer 2

이 아닌 수직으로, 수평 축을 고정 할 rotateX를 사용한다.

예 :

당신이 다른 방향으로 회전 할 경우 http://jsfiddle.net/VPjX9/287/, 단지 90DEG에 대한 -90deg 전환하고 그 반대의 경우도 마찬가지입니다.