Chrome中的'transform-origin'无效？

Question

我的Chrome控制台将返回Invalid CSS property name到transform-originCCS属性作为即使它工作的网站加载和我有一个-webkit-前缀版本.

目标CSS如下所示:

-webkit-transform-origin: 0% 50%;
-moz-transform-origin: 0% 50%;
transform-origin: 0% 50%;

这真的是一个问题吗？

Answer 1

我找到了问题的根源.

问题是当-webkit-浏览器transform-origin与支持属性(实际使用该属性的属性)隔离时,浏览器不接受该属性transform-origin.

所以,例如,如果我使用这样的东西,-webkit-假设它是错的:

#divOne{
   transform-origin:50% 50%;
   animation:jump 1s ease both;
}
@keyframe jump{
   from { transform: translateX(-20%) rotateY(-90deg); }
   to{ transform: translateX(0%) rotateY(0deg); }
}

这是错误的,因为该origin属性与transform将要使用它的属性分离.即使它有效,但从浏览器的角度来看,它并不完全正确.

它应该像这样是正确的:

#divOne{
   animation:jump 1s ease both;
}
@keyframe jump{
   from { transform: translateX(-20%) rotateY(-90deg); transform-origin:50% 50%; }
   to{ transform: translateX(0%) rotateY(0deg); transform-origin:50% 50%; }
}

两者transforms都在同一个元素上.