Css 铬合金&x27；转换原点'；是无效的吗？

当站点加载时，我的Chrome控制台会将

无效的CSS属性名

返回到

转换原点

CCS属性，即使它可以工作，并且我有一个

-webkit-

前缀版本

目标CSS如下所示：

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

---

这真的是个问题吗？

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

请阅读以下内容：

还有这个

---

我找到了问题的根源

问题是

-webkit-

浏览器不接受

转换原点

属性，因为它与支持属性（实际使用

转换原点

的属性）隔离

因此，例如，如果我使用这样的东西，

-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); }
}

#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%; }
}

这是错误的，因为

origin

属性与将要使用它的

变换分离。尽管它可以工作，但从浏览器的角度来看，它并不完全正确

应该是这样的才是正确的：

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

#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%; }
}

在Chrome、Safari和Opera的最新版本中，
转换和相关属性仍然需要以
-webkit
作为前缀。但我将其作为前缀，这就是它工作的原因，它根本不存在吗？它确实存在，也许问题出在别处。你能复制/粘贴问题中的问题代码吗？@Adrift在question@Adrift是的，我知道，它正在工作，这就是这里的讽刺：P我也在使用最新版本的Chrome！是的，我知道这一点，实际上我以前读过那个文档。我和你们一样对这种反应感到惊讶，对这里发生的事情一无所知：PI也有同样的问题，这不是实际的问题。在webkit上，您只需要为“变换原点”属性使用以下值集：“x%y%z；”。在我的例子中，仅使用“-webkit transform-origin:50%85%0；”就解决了这个问题。无论如何，0在IE和Mozilla浏览器中生成了一个bug。这就是为什么，如果使用SASS，每个前缀需要不同的值。不带前缀的不应具有webkit所需的“0”。