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

当前，转换从左向右滑动。你知道我怎么让它看起来是从上到下的吗

代码如下：

以下是一些css代码：

.flip{
-webkit背面可见性：隐藏；
-webkit转换：translateX（0）；
-moz背面可见性：隐藏；
-moz变换：translateX（0）；
}
.倒转{
-webkit动画名称：flipintoleft；
-moz动画名称：flipintoleft；
}
@-webkit关键帧flipouttoleft{
来自{-webkit变换：rotateY（0）；}
到{-webkit变换：旋转（-90度）比例（.9）；}
}
@-moz关键帧flipouttoleft{
来自{moz变换：rotateY（0）；}
到{moz变换：旋转（-90度）比例（.9）；}
}
@-webkit关键帧flipouttoright{
来自{-webkit变换：rotateY（0）；}
到{-webkit变换：旋转（90度）比例（.9）；}
}
@-moz关键帧flipouttoright{
来自{moz变换：rotateY（0）；}
到{moz变换：旋转（90度）比例（.9）；}
}
@-webkit关键帧翻转到左侧{
来自{-webkit变换：旋转（-90度）比例（.9）；}
到{-webkit转换：rotateY（0）；}
}
@-moz关键帧向左翻转{
来自{moz变换：旋转（-90度）标度（.9）；}
到{moz变换：rotateY（0）；}
}
@-webkit关键帧翻转到右侧{
来自{-webkit变换：旋转（90度）比例（.9）；}
到{-webkit转换：rotateY（0）；}
}
@-moz关键帧翻转到右侧{
来自{moz变换：旋转（90度）标度（.9）；}
到{moz变换：rotateY（0）；}
}

给你

我确信有一种更简洁的方法可以做到这一点，但我只是将CSS中的rotate Y值更改为rotate X，所以它是沿着X轴的

例如： 是：

现在是：

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

---

不要使用

rotateY

，而是使用

rotateX

，它将水平而不是垂直地固定轴

例如：

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

查看animate.css，其中的flipX功能会产生您想要的效果。您的意思是喜欢吗？

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