CSS/JQUERY翻转过渡效果改变方向

Question

目前从左向右滑动。知道我要怎么让它看起来从上到下吗?

代码如下:http://jsfiddle.net/lakario/VPjX9/

下面是一些css代码:

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

我相信有更干净的方法，但我只是改变了旋转Y值在你的CSS旋转X，所以它是沿着X轴。

的例子:是:

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

现在

:

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

Answer 2

不使用rotateY，而使用rotateX，它将水平固定轴，而不是垂直固定轴。

示例:http://jsfiddle.net/VPjX9/287/

如果你想让它以另一种方式旋转，只需将-90度切换为90度，反之亦然