2

私の Chrome コンソールは、サイトが動作していてプレフィックス付きのバージョンを持っていても、サイトが読み込まれると CCS 属性にInvalid CSS property name戻ります。transform-origin-webkit-

ターゲット CSS は次のようになります。

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

それは本当に問題ですか？

4

2 に答える 2

8

問題の原因がわかりました。

問題は、属性がサポート属性 (実際に を使用する属性) から分離されている場合-webkit-、ブラウザーがその属性を受け入れないことです。transform-origintransform-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が同じ要素に一緒にある場所。

于 2013-09-19T13:17:44.187 に答える