TIL 22 | CSS_transform & transition

1. transform & transition

今日は、反応型Webサイトの作成時に使用する変換と変換プロパティについて学習します.
タイトルページを作成した画像を切り取り、テキストを下端の図面のようにアイコンに並べたい.
左右の値段をあげればいいと思っていたのに、彼は望夫石のように座って動かなかった.△食べなさい、こいつ.

似たようなことは先日も経験しましたが、基準を設定していないからです.だから基準点を設定して、位置決め:相対;、このテキストはposition:absolute;あげました.
次に基準点があり、これを基準にテキストを移動すると、左と右のほかに変換されます.TADA!

transform: translateX(-50%); 名前の値を指定すると、transformの構文とtransformの構文をチェックします.:"D
CSS animateではtransformプロパティが多く使用されます.transformプロパティは強力な機能を備えているため、Web要素の位置を移動、スケール、回転することができます.
で優先的に変換されたx,y,z軸から見ると、CSS座標系において、基準点はブラウザの左上隅に位置する.
従来の数学的知識では,負の収縮yはy軸であり,x軸は同じであった.
Z軸は、立体的にディスプレイを見ている私の方向を指す座標軸です.
また、各座標軸の矢印方向は正であり、他端は負方向を指す.
では、2 D変形(transform)に提供される方法(method)を見てみましょう.
コードおよび成果物:http://tcpschool.com/css/css3_transform_2Dtransform

1) transform:scale()

transformは要素を複数のフォーマットに変換し、transformプロパティ
translate、scale、rotate、shift、matrixがあります.
変換:scale()-XまたはY軸にスケールします.
scaleは、これらの要素を指定したサイズに拡大または縮小することができます.

2) transform:rotate()

transform:rotate()-指定した要素を回転します.
rotateは要素を指定した角度に回転させます.
回転角度が正の場合は時計回りに、負の場合は反時計回りに回転します.

3) transform:translate()

transform:translate()-指定した要素XまたはY軸に移動します.
translateは、エレメントを指定した位置に移動し、X軸またはY軸で移動します.

4) transform:skew()

変換へんかん:斜体()-指定した要素XまたはY軸に傾ける
斜体は、X軸またはY軸の指定値に要素を傾けます.

5) transform:matrix()

matrix()メソッドを使用すると、1行にすべての2 D変換メソッドを設定できます.
この方法は2 D変形(transform)に関連する6つのパラメータを有し、マトリクス()方法のパラメータ順序は以下の通りである.

문법
matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY());