CODEWITHSUNDEEP
cssgoogle-chromedeveloper-tools
gespinha
gespinha

Reputation: 8487

In Chrome 'transform-origin' is invalid?

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.

The target CSS looks like this:

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

Is it really an issue?

Upvotes: 2

Views: 5470

Answers (2)

gespinha
gespinha

Reputation: 8487

I've found the origin of my issue.

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).

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

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.

It should be something like this to be correct:

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

Where both transforms are together on the same element.

Upvotes: 8

reggaemahn
reggaemahn

Reputation: 6648

The answer to your question in simple terms is 'NO'. It is a perfectly valid property. There must be something else that's causing the error.

Read this:

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

and this

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

Upvotes: 0

Related Questions