CSS - 003 - 金字塔動畫 clip-path & transform-origin

003

＋ 主題 - 金字塔動畫 clip-path & transform-origin

github連結

＋ css語法筆記 -

clip-path: 原本就存在於svg，繪製遮罩。必須同一方向，並且如果採用比例，長寬必須先行設定。
圓形 - circle ( 半徑 at 圓心座標 )
橢圓  - ellipse ( 長短半徑 at 圓心座標 )
內置矩形 - inset ( 上下左右的邊距 round 上下左右圓角尺寸 )
其他矩形三角形 - polygon ( 各角點, 各角點, .... )

舉例

transform-origin: 改變變形的原點。
transform-origin: x軸 y軸 z軸; 
(x.y軸可以設定left. right. center. 長度. 百分比，z軸只能設定長度)