在Javascript中设置CSS 3转换和转换在Chrome中有效，但在IE 10、FF中无效？

我有以下代码

    gallery.css("transition-duration", duration + "ms");
    gallery.css("-webkit-transition-duration", duration + "ms");
    gallery.css("-moz-transition-duration", duration + "ms");
    gallery.css("-ms-transition-duration", duration + "ms");
    gallery.css("-o-transition-duration", duration + "ms");
    //inverse the number we set in the css
    var value = (distance < 0 ? "" : "-") + Math.abs(distance).toString();

    gallery.css("transform", "translate3d(" + value + "px,0,0)");
    gallery.css("-webkit-transform", "translate3d(" + value + "px,0,0)");
    gallery.css("-moz-transform", "translate3d(" + value + "px,0,0)");
    gallery.css("-ms-transform", "translate3d(" + value + "px,0,0)");
    gallery.css("-o-transform", "translate3d(" + value + "px,0,0)");

gallery.css（“过渡持续时间”，持续时间+“毫秒”）；
css（“-webkit转换持续时间”，持续时间+“ms”）；
css（“-moz转换持续时间”，持续时间+“ms”）；
css（“-ms转换持续时间”，持续时间+“ms”）；
css（“-o-transition-duration”，duration+“ms”）；
//反转我们在css中设置的数字
var值=（距离<0？”：“-”）+Math.abs（距离）.toString（）；
css（“transform”，“translate3d”（+value+“px，0,0）”）；
css（“-webkit transform”，“translate3d”（+value+“px，0,0）”）；
css（“-moz-transform”，“translate3d”（+value+“px，0,0）”）；
css（“-ms转换”，“translate3d”（+value+“px，0,0）”）；
css（“-o-transform”，“translate3d”（+value+“px，0,0）”）；

这在chrome、andriod和Iphone上都很有效。但在IE10上（在移动设备上）不起作用，Firefox也部分起作用。有没有办法在Javascript/Jquery中解决这个问题

---

更新：我想我了解了主要问题。主要问题是触摸事件（touchstart、touchend、touchmove）在IE 10 mobile中不起作用。我用过对我来说很有用的。谢谢大家。

虽然并非所有浏览器都支持

Translate3d

，但它应该可以在FF中工作。自动取款机是唯一的浏览器

IE10不支持带有

preserve-3d

的

transform style

，因此这可能是您的问题。尽管如此，这里还是可以进行3d变换

---

我建议您将

translate3d

更改为

translateX

，因为您只修改

X

值。这可能已经解决了你的问题。一般来说，建议最后声明标准一致值（前缀自由形式），因为这是首选的表示法，并且没有一些专有内容覆盖它。

有关Internet Explorer的特定详细信息，请参阅MSDN文档关于

现在来看，它似乎只支持

变换样式：flat

本节列出了一个

本节包含级联样式的参考文档 在Windows中支持的图纸（CSS）转换函数 Internet Explorer。Windows中添加了对二维转换的支持 Internet Explorer 9，同时在中添加了对三维转换的支持 Internet Explorer 10

---

有一件事你一定要记住，那就是你使用特定于供应商的前缀的顺序。这样说是有区别的：

gallery.css("transition-duration", duration + "ms");
gallery.css("-webkit-transition-duration", duration + "ms");
gallery.css("-moz-transition-duration", duration + "ms");
gallery.css("-ms-transition-duration", duration + "ms");
gallery.css("-o-transition-duration", duration + "ms");

而且

gallery.css("-webkit-transition-duration", duration + "ms");
gallery.css("-moz-transition-duration", duration + "ms");
gallery.css("-ms-transition-duration", duration + "ms");
gallery.css("-o-transition-duration", duration + "ms");
gallery.css("transition-duration", duration + "ms");

正如在《》中提到的：

在

-webkit border radius

和

border radius

中，以最后一个为准

-webkit边界半径

是“实验性”属性-实现可能包含与规范的偏差。

边界半径的实现将与规范中的内容相匹配

最好在可用时使用“W3C实现”，以确保支持它的所有浏览器之间的一致性

话虽如此，请注意，您当前的实现可能会使用特定于供应商的实验属性覆盖“W3C实现”版本

关于您的问题的更具体的答案：

可能会让您更深入地了解哪些版本的浏览器声称支持不同版本的3d转换CSS

Internet Explorer

根据，IE 10支持完整的CSS3 3D转换（注意，只支持，以前的版本甚至不支持）

Firefox

在修复之前，Firefox声称支持CSS3 3D转换。根据，同样-Mozilla确实支持转换（如果您在Firefox中加载该页面，甚至演示了如何进行转换）

不幸的是，Firefox中更复杂的测试失败了。请参阅一个在Chrome中优雅工作的示例，但在FF中却没有。当然，部分支持，但没有WebKit实现的动画

注意：我使用Firefox 20.0.1进行测试

歌剧

Opera提供用于描述其对转换的支持

最终结果：

主流浏览器正在获得支持，但进展缓慢。未来的版本要求更全面的支持，但每个供应商似乎对“全面”的含义有不同的定义。所以-就像在网络世界里一样。。。编码员小心。。。在多个环境中进行测试，看看实际工作情况，然后再相信浏览器能够按照规范正常工作。
这里已经提出了一个问题：@Brewal这个问题已经有1,5年了。。。“自从你住在这里以来，发生了很多变化，我的朋友。”解释一下“不起作用”和“部分起作用”在你身上的意思。@PavloMykhalov，部分意味着它非常有用jurky@PavloMykhalov，这里是jsfiddle，除了它看起来有点坏之外，它在IE10中对我有效。（如果工作意味着你可以浏览imagegallery）。我已经在Lumia 920（IE 10）中进行了测试。这不是交换。这是怎么可能的呢？但在最新的诺基亚Lumia 920（IE 10）中却没有。请帮忙me@user960567您是否尝试过按照我在回答中的建议将
translate3d
更改为
translate
或
translateX
？谢谢。但是它不起作用。我认为我使用的插件不适用于移动IE 10。从插件来看，
这个jQuery插件只能在运行基于移动Webkit的浏览器（iOS 2.0+，android 2.2+）的设备上运行
我们能让它在IE 10中工作吗？你的建议对我不起作用，在IE 10上试试这个。我现在使用的插件似乎只在Webkit浏览器中工作，有没有办法让它诚实地工作-可能没有，直到其他浏览器在fea的实现中赶上