在 Chrome 中，“transform-origin”无效？答案

【问题标题】：In Chrome 'transform-origin' is invalid?在 Chrome 中，“transform-origin”无效？
【发布时间】：2013-09-19 12:12:15
【问题描述】：

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

目标 CSS 如下所示：

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

真的有问题吗？

【问题讨论】：

在 Chrome、Safari 和最新版本的 Opera 中，transform 简写和相关属性仍需要以 -webkit 为前缀。
但是我有它的前缀，这就是它起作用的原因，这根本不存在吗？
确实存在，可能问题出在其他地方。您可以在问题中复制/粘贴有问题的代码吗？
@Adrift 更新了这个问题
@Adrift 是的，我知道，它正在工作，这就是讽刺：P 我也在使用最新版本的 Chrome！

标签： css google-chrome developer-tools

【解决方案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 都在同一个元素上。

【讨论】：

我遇到了同样的问题，这不是实际问题。在 webkit 上，您只需为 transform-origin 属性设置以下值：“x% y% z;”。就我而言，只需使用：“-webkit-transform-origin: 50% 85% 0;”解决了这个问题。无论如何，0 会在 IE 和 Mozilla 浏览器中产生错误。这就是为什么，如果使用 SASS，每个前缀都需要不同的值。非前缀不应该有“0”的 webkit 需求。

【解决方案2】：

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

阅读：

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

还有这个

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

【讨论】：

是的，我知道这一点，实际上我之前阅读过该文档。我和你一样对这种反应感到惊讶，对这里发生的事情一无所知：P