В Chrome 'transform-origin' недопустимо?

Question

Моя консоль Chrome возвращает Invalid CSS property name в атрибут 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