[JS作品]JS30系列05 : Flex Panel Gallery 柔性面板畫廊
作品網址： 主題目標 用CSS與JS來製作一個點擊後會 […]
作品網址：
主題目標
用CSS與JS來製作一個點擊後會動畫展開的圖片展示效果， 運用到了CSS的flex、transform、transition.. 這篇比較偏向css知識！
需求思考分析
-
原本橫的面幅，要變成一條一條直立的面幅。
-
點擊會彈性擴大點擊的面框幅。
-
再點擊一次會縮回來原本大小
特別技術、函式
flex-direction:屬性啟用主軸。 row | row-reverse | column | column-reverse
translateY(y)：定義 Y 軸方向的 2D 轉換。
參考資料：
圖解：CSS Flex 屬性一點也不難：https://wcc723.github.io/css/2017/07/21/css-flex/
「JS30紀錄＆心得」05 – Flex Panel Gallery：https://guahsu.io/2017/05/JavaScript30-05-Flex-Panel-Gallery/
CSS3 transform 屬性： http://www.wibibi.com/info.php?tid=CSS3_transform_%E5%B1%AC%E6%80%A7