[CSS100] Day 14 Byciclopter
![](/images/avatar.png)
Byciclopter Demo
See the Pen 014 - Byciclopter by Cathy (@smile25896) on CodePen.
這次的題目是要做一個動畫卡片,當 hover 時會垂直翻面到背面。
動畫的部分除了之前常用的 css animation 語法,因為這次腳踏車的線和直升機背後的線,產生隨機的大量線段,因此在 html 的部分會用到 Slim 跑回圈產生大量線,在用 SASS 跑回圈讓每個線段產生不同的寬度位置等。
翻面的效果則是會用到 perspective
這個 css 屬性來調整卡片的透視。
學習重點
- Slim 迴圈
- SASS 迴圈 和 random()
- perspective 透視
Slim 迴圈
1 | .street |
這樣會轉換成 html:
1 | <div class="street"> |
SASS 迴圈 和 random()
接著要幫 line-1 ~ line-9 分別套上 css 樣式,所以在樣式的地方也同樣要跑回圈。
1 | @for $i from 1 through 9 { |
會轉換成:
1 | .line-1 { |
有一些隨機值,像是線段的寬度等可以使用 random()
來產生隨機的數值。
random(100)
會隨機產生 1~100 的數值,套用在 SASS 上:
1 | @for $i from 1 through 9 { |
perspective 透視
將卡片垂直翻轉到背面,要 180 度旋轉卡片的 X 軸:transform: rotateX(180deg)
。
但如果只是單純的旋轉 X 軸,沒有透視效果的話,看起來只會是卡片變扁再復原:
![](/images/posts/dayscss14/01.gif)
因此我們要在外層加上:perspective
屬性,才會有透視感。
perspective
詳細的用法可以參考:Perspective
除此之外,為了讓翻到背面的圖案不顯示,要再加上 backface-visibility: hidden;
語法。
心得
這次的 CSS100 天挑戰的文章,直接跳過了中間幾個題目的筆記。原本希望是每做完一篇就寫一篇文章,當作是教學文章。
但現在比較傾向改成我自己的學習筆記,所以只會在我有學到新東西且想做紀錄時,才會寫一篇文章,主要是新知識的紀錄,介紹得也不會像之前那麼詳盡。