如何在頁面上翻轉 500 個 ul li 元件

當我們需要在網頁上改變排列順序,第一直覺可能是利用 JavaScript 改變 HTML 的架構,

像是在頁面上翻轉 500 個 ul li 元件,可以先宣告一個變數存放頁面中的 li 元件,

再利用 for 迴圈「從尾到頭」對 li 重新排列,達到翻轉的效果。

 

當然這只是眾多 JavaScript 解法的之一,但除了依靠 JavaScript 外,

CSS3 的出現,提供了更多彈性、創意的解答方式,

讓我們跳脫程式的思考框架,來看看 CSS 是如何辦到的

 

CSS 第一招:flexbox

只要在 CSS 中對 ul 設定 display: flex ; 後

加上 flex-direction : column-reverse / row-reverse ;

ul 中的 flex-item 就會乖乖照你的指示排列。

若是對 flexbox 排版不熟悉,可以參考 Blog 中的 flexbox 教學,

教學:http://prototype-hacker.com/flexbox/

 

這裡還有個有趣的小遊戲,利用 flexbox 排版幫青蛙放到對應的荷葉上。

透過小遊戲你可以理解到 flexbox 是如何運作。

小遊戲:http://flexboxfroggy.com/

 

 

 

 

 

 

 

 

 

CSS 第二招:tranform: rotate

這個方式取自網友的神回覆,對 ul 反轉一圈後,再個別反轉 li 元素

完全活用 了CSS3特點,讓人會心一笑又不得不佩服他的思維。

光看程式碼想像不出來沒關係,我們在下方提供了動畫連結給你,

可以看出 ul  li 個別旋轉後的變化,更容易理解該怎麼利用 transform: roate來反轉元素。

動畫連結:http://codepen.io/oscar9527/pen/XMEKYq

 

我們可以藉著 CSS3 的新特性,處理以往要靠 JavaScript 才能達成的功能,

除了上述的 flex 、 transform 兩項新特性外,

CSS還有 Transition、Animation、Pseudo-classes、calc 等,

提供我們更多元的解決方法,跳脫單一的思考框架。

 

小提醒:不管用什麼方式,考量使用者的環境後找出最適合的答案才是最重要的,利用 CSS3 時,別忘了看看各家瀏覽器對 CSS 語法的支援程度,如果你有不同的技巧,不妨在底下留言分享給我們!