This is one of those cases where vendor prefixes for standardized features become extremely problematic,because you need to account for all the different prefixed and/or unprefixed implementations of different features in different versions of different browsers.

What a mouthful. And then you have to combine varIoUs permutations of these. What a handful.

In short,you need to figure out which versions of each browser requires a prefix for each of the individual properties,and unless you don’t mind the bloat,you will need to apply the prefixes differently for individual browsers.

@H_404_31@

链接的问题是指动画而不是转换，导致显着不同的符号，但是这两个特征都经历了类似的未修正过程AFAIK。话虽如此，这里是caniuse.com的2D transforms和transitions的兼容性表。

换句话说，只是因为一个功能在一个浏览器的一个版本中是前缀，并不意味着另一个功能也必须在相同版本的同一浏览器中作为前缀。例如，Chrome在未修改变换(36)之前，将至少十个主要版本(26)的Chrome未修改转换，而Safari仍然需要转换前缀。因此，你肯定要有这个声明：

transition: -webkit-transform .3s ease-in-out;

如果您绝对需要，您将不得不使用以下内容覆盖更旧的版本：

-webkit-transition: -webkit-transform .3s ease-in-out;

其他浏览器，奇迹般地，能够同时解除转换和转换(以及动画)，这使得事情变得更加容易：

> -ms-transition仅用于早期版本的IE10的预发行版本。没有其他版本的IE使用前缀转换，所以你应该删除那个特定的转换前缀。

带前缀的-ms-transform仅由IE9使用; IE10及更高版本配有未经修改的变换。但是为了优雅的降级，您可能希望保持-ms-transform：rotateX(-30deg);声明 – 请记住，由于IE9不支持CSS转换或动画，因此不能转换。
Firefox使用-moz-transition和-moz变换，最多可以使用15个，而在16中则是未修改的。
Opera已经使用-o-transition和-o-transform直到并包括12.00，然后在12.10中是未修改的，然后重写为-webkit-在更新的版本中转到Blink。

总而言之，根据caniuse.com提供的信息(我信任的大部分信息是最新和准确的)，这里是您需要的所有前缀：

-webkit-transition: -webkit-transform .3s ease-in-out; /* Chrome < 26,Safari < 7 */
   -moz-transition:    -moz-transform .3s ease-in-out; /* Firefox < 16 */
     -o-transition:      -o-transform .3s ease-in-out; /* Opera < 12.10 */
        transition: -webkit-transform .3s ease-in-out; /* Chrome 26-35,Safari,Opera 15-23 */
        transition:         transform .3s ease-in-out; /* IE10+,Firefox 16+,Chrome 36+,Opera 12.10 */

 -webkit-transform: rotateX(-30deg);
    -moz-transform: rotateX(-30deg);
     -ms-transform: rotateX(-30deg); /* Only for graceful degradation in IE9,cannot be transitioned */
      -o-transform: rotateX(-30deg);
         transform: rotateX(-30deg);

您将需要支持最新版本的每个浏览器的最低限度，为此写作：

transition: -webkit-transform .3s ease-in-out; /* Chrome 26-35,Opera 12.10 */

 -webkit-transform: rotateX(-30deg);
         transform: rotateX(-30deg);

如评论中所述，您可以使用像Autoprefixer这样的工具，根据您需要的浏览器支持级别为您自动化。然而，对于那些喜欢手动编写CSS的人来说，对于那些只是想知道哪些浏览器需要哪些前缀的人，就是这样。

最后一个注意事项：注意上述例子中的两个未修改的转换声明？现在，您可以认为将它们组合成一个单一的声明是很容易的：

transition: -webkit-transform .3s ease-in-out,transform .3s ease-in-out;

但是，不幸的是，Chrome will erroneously completely ignore this declaration，而其他浏览器将应用它很好。