css - 在 Chrome 中 'transform-origin' 无效？

Question

我的 Chrome 控制台在加载网站时将 Invalid CSS property name 返回到 transform-origin CCS 属性，即使它可以正常工作并且我有一个 -webkit- 前缀版本。

objective-c SS 如下所示:

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

这真的是个问题吗？

Answer 1

我找到了问题的根源。

问题是 -webkit- 浏览器不接受 transform-origin 属性，当它与支持属性(实际使用 code>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 分离。尽管它有效，但从浏览器的 Angular 来看并不完全正确。

它应该像这样是正确的:

#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 都在同一个元素上。