在Chrome中，"transform-origin"无效吗? [英] In Chrome 'transform-origin' is invalid?

问题描述

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

My Chrome console returns Invalid CSS property name to a transform-origin CCS attribute as the site loads even though it works and I have a -webkit- prefixed version.

目标CSS如下:

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

这真的是一个问题吗?

推荐答案

我已经找到问题的根源.

I've found the origin of my issue.

问题在于，当-webkit-浏览器与支持属性(实际上使用transform-origin的属性)隔离时，-webkit-浏览器不接受transform-origin属性.

The problem is that -webkit- browsers don't accept the transform-origin attribute when it is isolated from a supporting attribute (an attribute that actually uses the transform-origin).

例如，如果我使用这样的内容，则 -webkit-认为这是错误的:

So, for example, if I use something like this, -webkit- assumes it is wrong:

#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分离.即使可以，但从浏览器的角度来看也不是完全正确的.

It is wrong because the origin attribute is detached from the transform that is going to take use of it. Even though it works, it is not entirely correct on the browser's perspective.

应该是这样的是正确的:

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

Where both transforms are together on the same element.

这篇关于在Chrome中，"transform-origin"无效吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！