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

【问题标题】：CSS/JQUERY flip transition effect change directionCSS/JQUERY翻转过渡效果改变方向
【发布时间】：2013-06-14 17:03:48
【问题描述】：

当前过渡从左向右滑动。想知道如何让它看起来是从上到下的吗？

代码如下： 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); }
}

【问题讨论】：

查看animate.css daneden.me/animate，里面的flipX功能就是你想要的效果。
你的意思是像jsfiddle.net/ExplosionPIlls/VPjX9/286？

标签： jquery css css-transitions transitions

【解决方案1】：

给你！

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

我确信有一种更简洁的方法可以做到这一点，但我只是将 CSS 中的旋转 Y 值更改为旋转 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); }}

【讨论】：

【解决方案2】：

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

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

如果您希望它以其他方式旋转，只需将 -90deg 切换为 90deg，反之亦然。

【讨论】：