Transform,Position,擬似要素達

最近マークアップを触っていなくて、全然思い出せなくて詰まりまくったのでメモ...

Transform

transformは、2D変形、3D変形を行うことができるよ
関数を使用することで、移動、回転、遠近効果などを生み出せるよ
アニメーションをする際に結構使われるよ

Transform関数

半角スペースを入れると、関数を複数使うことができるよ

transform-origin: x y;プロパティで変形の起点(支点、原点)を変えることができる

第三引数にはeaseを設定することができ、デベロッパツールでグラフをいじって時間量、変化量の数値を生成し、反映することで変更できる

参考サイト：http://www.htmq.com/css3/transform.shtml

Position

位置を調節するプロパティだよ
デフォルト値はstaticだよ

値は以下五つ

static：staticはpositionの初期値で、top,left,z-indexは適用されない

relative：指定してもstaticと位置は特に変わらないが、top,left,z-indexは適用されるようになるよ

absolute：一番近い順で、親要素がstatic以外の場合、親要素を基準に絶対位置を指定（親要素がない場合、左上からの絶対位置が指定される）
要素の高さはなくなり（親要素も子要素分の高さが引かれる）、下にある通常配置の要素が上に詰まって配置されるよ

fixed：absoluteと同じで高さがなくなるよ
ウィンドウ画面を基準に絶対位置を指定、スクロールしてもその場所に固定されてるよ

sticky：static,relativeと同じで高さがあるよ
親の要素の中でしか、指定した位置に絶対配置されない
つまりスクロールをするとfixedと同じでウインドウ全体を基準に指定した位置に指定されるよ
親要素が終わるとstickyの要素もそこまでしかスクロールの絶対配置効果が効かない

擬似要素

擬似要素は、要素の前(::before)後(::after)に内容を挿入できるよ
挿入内容はcontentプロパティで指定(背景色を利用したいときは空文字を渡す)
2つ以上は同じ要素に指定できない