变换：jquery .animate 函数中的 rotateX

【问题标题】：transform: rotateX in jquery .animate function变换：jquery .animate 函数中的 rotateX
【发布时间】：2013-01-12 04:45:00
【问题描述】：

我正在尝试使用 CSS 执行翻转效果。我怎样才能得到 -

transform: perspective(1200px) rotateX(0deg)

来自

transform: perspective(1200px) rotateX(90deg)

使用jQuery的.animate()函数？

我尝试过使用 jQuery 2D 转换插件，但没有成功。

【问题讨论】：

只需添加一个自定义 CSS Hook，您就可以开始使用了。不过，我不知道有任何标准可以向它传递多个参数。
你可以在这里尝试答案，你只需要修改它以接受两个参数。 stackoverflow.com/questions/12062818/…
jsfiddle.net/ryleyb/ERRmd

标签： javascript jquery css flip

【解决方案1】：

使用原生 CSS。像这样的：

.panel {
    transform: perspective(1200px) rotateX(0deg);
    transition: transform 0.5s linear;
    -webkit-transition: transform 0.5s linear;
}
.panel.flip {
    transform: perspective(1200px) rotateX(90deg);
}

然后只需切换类。

【讨论】：

感谢这个帮助，但它只在 Firefox 中有效，我试图以这种方式重写代码......将我的代码放在答案中，但它对我没有帮助......翻转效果有效仅在 Firefox 中...我怎样才能使它成为多浏览器？
它也适用于 IE10。要使其在 Chrome 中运行，请添加 -webkit-transform 并更改 -webkit-transition 以影响 -webkit-transform。