iT邦幫忙

transform相關文章
共有 8 則文章

技術 RWD-off-canvas 側邊選單練習

這次來練習一個比較進階的練習,是 RWD + off-canvas 側邊選單練習 這次練習會使用到 jQuery 的 addClass 跟 removeCla...

鐵人賽 自我挑戰組 DAY 29
網頁學習紀錄 系列 第 29

技術 鐵人賽 Day29 收合式側邊選單練習

這次的練習參考 Amos 老師的金魚都能懂的網頁切版 : 收合式側邊選單 NO014 ,側邊選單收合很常被使用,各種網站都會看到這樣的寫法,之前也因為參加 F2...

鐵人賽 自我挑戰組 DAY 25
網頁學習紀錄 系列 第 25

技術 鐵人賽 Day25 人員卡片介紹-互動效果 transform

這次要把上次寫好的人員卡片來做個互動效果,讓使用網頁的人覺得不無聊, 畫面預計滑鼠經過後會有這樣的效果,如下圖。 SCSS 是這樣編寫的,程式碼如下 .car...

鐵人賽 自我挑戰組 DAY 24
網頁學習紀錄 系列 第 24

技術 鐵人賽 Day24 人員卡片介紹-三角形裝飾

用 CSS 寫出方形不太困難,但寫出三角形真的是滿酷的一件事情, 不用圖片本身去製作,而是直接用 CSS 來製作三角形的遮罩感, 想要呈現的如下圖: 這次算是...

鐵人賽 自我挑戰組 DAY 14

技術 Day14 CSS3 動畫 Transitions實作練習(下)

續上上篇我們對 Transitions 的學習,我們實現幾個效果試試看吧! 在上篇實作中完成了上方兩個動畫效果,本篇我們繼續實作下方兩個動畫效果吧! 左下動畫...

鐵人賽 Modern Web DAY 13
CSS Secrets 導讀 系列 第 13

技術 Secret 11: 鑽石形圖片

鑽石形的圖片是常見的一種視覺設計,但是用 CSS 不容易做到。事實上,一直到最近,它還是不可能實現的效果。以前網頁設計師要實現鑽石形圖片,必須從原始圖片下手,先...

鐵人賽 Modern Web DAY 12
CSS Secrets 導讀 系列 第 12

技術 Secret 10: 平行四邊形

平行四邊形使用在網頁設計的時候,是為了讓頁面看起來更活潑更有動感。 首先用skew()來製作一個平行四邊形的按鈕。 <a href="#&quo...

鐵人賽 Software Development DAY 8

技術 Flip Card - 翻轉圖片

我們可以通過 Core Animation 來對圖片做各種翻轉的操作。 這次想要讓使用者可以通過手勢來翻轉卡片。 FlipCard 當使用者在畫面上滑動的時...