html - 为什么我的 CSS 转换不适用于转换 : matrix3d property?

Question

当我将元素的过渡设置为:

transition: transform 1s, -webkit-transform 1s, -moz-transform 1s;
-webkit-transition: transform 1s, -webkit-transform 1s, -moz-transform 1s;
-moz-transition: transform 1s, -webkit-transform 1s, -moz-transform 1s;

当元素的 transform: matrix3d 属性发生变化时，该元素不会进行动画处理。

这是否受支持？ Mozilla 表示 transform 属性可用于转换 ( https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties?redirectlocale=en-US&redirectslug=CSS%2FCSS_animated_properties )

为什么它对我不起作用？

我设置了一个 fiddle :http://jsfiddle.net/diracleo/aFudH/1/

Answer 1

在你的 css 规则中你这样写:

transition: transform 1s, -webkit-transform 1s, -moz-transform 1s;
-webkit-transition: transform 1s, -webkit-transform 1s, -moz-transform 1s;
-moz-transition: transform 1s, -webkit-transform 1s, -moz-transform 1s;

但对于应该转换的属性，您应该使用与 transition 之一匹配的相应供应商前缀(如果该属性需要供应商前缀)。

所以它必须看起来像这样:

transition: transform 1s;
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;