支持translate3d()

Question

对某人来说这个问题可能很简单。在我的网站的CSS中，我使用了相当多的translate3d()来制作一些漂亮的动画。事情是，所有这些动画是2d，我一直在使用translate3d()，以利用GPU渲染在适用的地方。

换句话说，我一直在使用以下内容：

transform: translate3d(50%, 50%, 0);和动画它，而transform: translate(50%, 50%);将实现相同的视觉效果，而没有GPU的推动。

现在，我在CanIUse上做了一些工作，我发现，不幸的是，当谈到Internet (当然)它有点缺乏对translate3d()的支持，对2d转换的支持并不是更好，但至少它允许我访问IE9。

因此，我的问题是(请注意，我正在使用Mac，目前无法找到一种方法来测试它)，如果我使用的是translate3d()，即使IE不支持特定的属性，它会认识到我只使用X和Y转换并且仍然呈现吗？还是干脆把它们都换成普通的旧translate()好呢？

就像我说的，我不情愿的唯一原因是因为有了复杂的动画，GPU的加速效果很好。

如果IE不会自动倒退(我期待和害怕)，还能有谁提供任何其他技术，比如我可以在支持它的浏览器中利用GPU渲染，但是支持IE呢？

我可以简单地列出我的css中的2d和3d转换(按这个顺序)，这样IE就会忽略translate3d()，还是会占用额外的资源？

谢谢您的输入，我们对此非常感谢。

Answer 1

您可以使用只适用于其他浏览器的-ms-transform和transform。

-ms-transform: translate(50%, 50%); /* IE9 support*/
transform: translate3d(50%, 50%, 0); /*  IE10+ and other browser*/

IE9将忽略transform并使用-ms-transform