[JS作品]JS30系列05 : Flex Panel Gallery 柔性面板畫廊

 

作品網址：

Demo作品連結
JavaScript 30 作品目錄

 

 

 

主題目標

用CSS與JS來製作一個點擊後會動畫展開的圖片展示效果，
運用到了CSS的flex、transform、transition.. 這篇比較偏向css知識！

需求思考分析

  1. 原本橫的面幅，要變成一條一條直立的面幅。
  2. 點擊會彈性擴大點擊的面框幅。
  3. 再點擊一次會縮回來原本大小

特別技術、函式

<HTML>

 

<CSS>

flexbox(CSS3 彈性盒子)

flex-direction:屬性啟用主軸。 row | row-reverse | column | column-reverse

 

 CSS3 transform

translateY(y)：定義 Y 軸方向的 2D 轉換。

<JavaScript>

 

 

參考資料：

圖解：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

Steven玄

謝謝您觀看本站內容!! 😅 西元93年台灣男，軟體前、後、資料庫工程師 和 多元收入實踐，程式設計、網站系統規劃、商業策略分析規劃、多元收入研究，目前在網站開發公司擔任工程師。

發佈留言