css - CSS3変換：複数の起源？

Question

CSS3でスケーリング用に左上(0%、0%)に原点を指定し、回転用に別の原点(中央)を指定することは可能ですか? それが役立つ場合、私はwebkitでのみ作業しています。

現在、変換リストを使用しています (つまり、-webkit-transform: scale(newScale) rotate(newRotate))

しかし、途中で原点を変更することはできないようです。これを見る良い方法はありますか？現在、オブジェクトを拡大縮小してデフォルトの中心で原点を回転させると、要素の位置がオフになるため、要素をドラッグすると、カーソルは要素の左上にありますが、そうあるべきです中心に。原点を中心に変更してスケーリングすると、これは修正されますが、回転と反転に関する新しい問題が発生します。

Answer 1

次のように親子関係を作成することにより、問題の適切な解決策を見つけました。

<div class="container">
   <img src="" />
</div>

これで、次のように2つのクラスを設定できます。

.container {
    -webkit-transform-origin: 0% 0%;
    -webkit-transform: scale(0.5);
}

.container img {
    -webkit-transform-origin: 50% 50%;
    -webkit-transform: rotate(45deg);
}

これは、私が望むことを正確に実行します。左上を原点として拡大縮小し、次に原点を中心として回転します。出来上がり！

Answer 2

代わりに、原点 (0,0) でのスケーリングを、原点中心でのスケーリング + 移動と考えてください。単独では、次のとおりです。

-webkit-transform-origin: top left;
-webkit-transform: scale(1.5);

以下と同じです:

-webkit-transform-origin: center;
-webkit-transform: scale(1.5) translate3d(16.66%, 16.66%, 0);

sqrt(1/2)-0.5理論的には、回転原点の中心は、原点を下に右に移動する必要があるため、角が突き出たままになるはず20.71%ですが、何らかの理由で、webkit 変換アルゴリズムが物事を下に移動し (十分ではありません)、原点をスケーリングします (これも完全ではありません）。したがって、すぐに移動して50%、この奇妙な動作を調整する必要があります。

-webkit-transform-origin: center;
-webkit-transform: scale(1.5) rotate(45deg) translate3d(52.5%, 0.5%, 0);
-webkit-transition: all 2s ease-in;

注：私の最初の答えは、 with を使用divしwidth:100px;、height100px;これにはtranslate3d(54px, 0, 0).

Answer 3

それはどうですか: http://jsfiddle.net/22Byh/1/