translate vs transform-origin css3

誰かが私を助けることができるかどうか疑問に思っていました。私は正確にcss3プロパティが何であるかを理解するのに苦労してきました：transform-origin。私はそれが動いている方向に従うように見えない。translate vs transform-origin css3

たとえば、正方形のdivがあり、それを40度回転させるとします。 transform-origin: 100% 0%を実行します。 translateX(and some value)はできませんか？ translateXは、回転を実行した後、新しく回転した軸に対してx軸に沿ってそれを移動させるようです。私は、起源が何をしているのか、それが何であるのかを追うことができません。

明確で徹底的な例が大いに評価されます。 =）

出典

2011-12-25 Sasha

ここにいくつかの例：ここでは

は例示であるhttps://medium.com/hexacta-engineering/tune-your-css-transform-origin-and-rotation-visually-b043a8b1a03e – pomber

transform-originは、エレメント全体を移動するのではなく、エレメントを移動するポイントを変更します（translateのように）。デフォルト値はtransform-origin: 50% 50%;です。 http://jsfiddle.net/joshnh/73g7t/

出典

2011-12-25 02:50:27 joshnh

ああおかげで、それはたくさんの意味がありました！ – Sasha

全く心配はありません！ – joshnh

このリンクは現在動作していないようですが、これは次のようになります。http://jsfiddle.net/73g7t/ – Lack

translate vs transform-origin css3

答えて

関連する問題