html - 参照システムを維持したまま CSS3 変換を組み合わせる

Question

この CSS3 変換では:

transform: translateX(100px)

要素を 100 ピクセル右に移動します。

これで：

transform: rotate(180deg)

要素が 180 度回転します。

ただし、両方を組み合わせると、次のようになります。

transform: rotate(180deg) translateX(100px)

要素が 180 度回転し、左に移動します。変換の参照システムは Web ページではなく要素にリンクされているためです。Web ページの参照システムを維持しながら変換を組み合わせる方法はありますか?

Answer 1

私にとっては、変換ステートメントの順序を変更するだけで十分でした。

transform: translateX(100px) rotate(180deg)

このように、要素は回転され、右から移動されました。（クロム）