CSS3 2D変換
CSS3 2D Transforms
CSS3 Transforms
CSS3 Transforms では、要素を移動、拡大縮小、反転、回転、ストレッチすることができます。
それはどのように機能しますか?
変形効果を使用すると、要素の形状、サイズ、位置を変更できます。
2D または 3D 要素を使用して変換できます。
2D変換この章では、2D変換方法について学びます:
Translate()Rotate()scale()skew()matrix()translate( ) メソッドtranslate() メソッドは、左 (X 軸) と上 (Y 軸) の位置で指定されたパラメーターに従って、現在の要素の位置から移動します。
transform: translate(50px,100px);変換値 (50px、100px) は、左の要素から 50 ピクセル、上から 100 ピクセルに移動されます。 rotate() メソッド
rotate() メソッドは、要素を指定された度だけ時計回りに回転します。負の値を指定すると、要素が反時計回りに回転します。
transform: rotate(30deg);rotate value (30deg) 要素は時計回りに 30 度回転します。 scale() メソッド
scale() メソッドでは、幅 (X 軸) と高さ (Y 軸) のパラメーターに応じて要素のサイズが増減します。 scale(2,4) は幅を元のサイズの 2 倍に変換します、高さは元のサイズの 4 倍になります。 skew() メソッド skew() メソッド、この要素は水平 (X 軸) と垂直 (Y 軸) の線パラメーターに基づいて角度を与えます: skew(30deg,20deg) ) は X 軸の周りにあり、要素は Y 軸の周りに 20 度および 30 度あります。 matrix()メソッド matrix()メソッドと2D変換メソッドが1つに統合されました。 matrix メソッドには、回転、スケーリング、移動 (平行移動)、傾斜関数を含む 6 つのパラメーターがあります。 transform: scale(2,4);
transform: skew(30deg,20deg);
transform:matrix(0.866,0.5,-0.5,0.866,0,0);