Question

我的Chrome控制台会在网站加载时将Invalid CSS property name返回到transform-origin CCS属性，即使它有效并且我有一个-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在同一元素上的位置。

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

Chrome中的'transform-origin'无效？

2 个答案: