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

Answer 2

简单来说，您的问题的答案是“否”。这是一个完全有效的属性。一定有其他原因导致错误。

读这个：

https://docs.google.com/document/d/1UsKm0ywILw9cuTRYlkhqMYTdzNcih6sO15u1eCzGgP8/edit?pli=1#

和这个

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin#Browser_compatibility