CSS3(Transform)の新機能まとめ_html/css_WEB-ITnose

概要:

CSS3 に新しく追加された Transform は、形状や一部の 3D 変形だけでなく、視覚領域内の要素の座標を変更できます (この変更によりドキュメントは再配置されません。再配置されるだけです)。アニメーションと組み合わせると (ここからリンクがあります)、クールなアニメーションを実現します。パラメータ (x, y)、y が入力されていない場合、scaleY の値は、それぞれ x または y のスケーリングを設定するために使用されます。パラメータのタイプは角度 (度)、y が入力されていない場合、デフォルトは 0 (スケーリングとは異なります);

#demo {   transform:rotate(180deg)  ;/*实现旋转,左上角的东西会在右下角显示*/}

x または y のみを設定する場合は、2 つのサブメソッドを直接使用できます。 skewX と skewY;

Translate (translate):

translate は 2 つのパラメータ (x, y ) を受け取ります。y 値が入力されていない場合、デフォルトは 0 になります。CSS ですべての有効な長さ単位がサポートされます (要素の移動にtranslateを使用しても、再配置はトリガーされず、再描画のみがトリガーされます);

#demo {  transform:scale(1.2);/*放大1.2倍*/  transform:scale(.8);/*缩小为正常的0.8倍*/}

には、translateという2つのサブメソッドもあります。) もちろん、私のように自殺しないでください

関連参照ドキュメント:

MDN's Transform

w3school の Transform

W3 のドキュメント