html - CSS transform,translate が回転した要素の回転を変更するのはなぜですか?

Question

回転する要素が多数あり、水平位置を移動するためにそれらを移動したいと考えていました。ただし、単純な変換/変換を実行すると、要素の回転が失われ、元の状態に戻りました (回転なし)。

要素をシフトするために変換/平行移動/回転を実行することでこれを修正しましたが、(x,y) を平行移動すると回転が失われるのはなぜですか? 私はd3.jsを使用していますが、そのライブラリが変換を処理する方法に問題がありますか、それともCSSはこれを自然に行いますか?

Answer 1

これは、すべてのcss属性と同じです。

カスケードの性質により、変換宣言を再定義すると、最新の変更のみが適用されます。

.element{
   transform:rotate(angle);
   transform:translate3d(x,y,z);     /* now only the translation will be applied*/
}

両方の変換を適用するには、それらを1つの宣言に含める必要があります。

.element{
   transform:rotate(angle) translate3d(x,y,z);
}

D3は変換にCSSを使用するため、以前の変換は最新の変換に上書きされます。

小さな例