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 軸) のパラメーターに応じて要素のサイズが増減します。

transform: scale(2,4);

scale(2,4) は幅を元のサイズの 2 倍に変換します、高さは元のサイズの 4 倍になります。

skew() メソッド

skew() メソッド、この要素は水平 (X 軸) と垂直 (Y 軸) の線パラメーターに基づいて角度を与えます:

transform: skew(30deg,20deg);

skew(30deg,20deg) ) は X 軸の周りにあり、要素は Y 軸の周りに 20 度および 30 度あります。

matrix()メソッド

matrix()メソッドと2D変換メソッドが1つに統合されました。

transform:matrix(0.866,0.5,-0.5,0.866,0,0);

matrix メソッドには、回転、スケーリング、移動 (平行移動)、傾斜関数を含む 6 つのパラメーターがあります。


学び続ける
||
<!DOCTYPE html> <html> <head> <style> div { margin:30px; width:200px; height:100px; background-color:#00ff00; /* Rotate div */ transform:rotate(9deg); -ms-transform:rotate(9deg); /* Internet Explorer */ -moz-transform:rotate(9deg); /* Firefox */ -webkit-transform:rotate(9deg); /* Safari 和 Chrome */ -o-transform:rotate(9deg); /* Opera */ } </style> </head> <body> <div>Hello World</div> </body> </html>
  • おすすめコース
  • コースウェアのダウンロード
現時点ではコースウェアはダウンロードできません。現在スタッフが整理中です。今後もこのコースにもっと注目してください〜