最近マークアップを触っていなくて、全然思い出せなくて詰まりまくったのでメモ...
Transform
transformは、2D変形、3D変形を行うことができるよ
関数を使用することで、移動、回転、遠近効果などを生み出せるよ
アニメーションをする際に結構使われるよ
Transform関数
| 役割 | 関数名 |
|---|---|
| 移動 | translate(x,y) |
| 回転 | rotate(deg) |
| 縮尺 | scale(x,y) |
| 並行 | skew(x,y) |
半角スペースを入れると、関数を複数使うことができるよ
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つ以上は同じ要素に指定できない