iT邦幫忙

transform相關文章
共有 13 則文章
鐵人賽 自我挑戰組 DAY 24
網頁學習雜記 系列 第 24

技術 Day 24 | 來做個搖擺的球吧

今天就來講一下 transform-origin 的應用吧! 來做一個搖擺的球, 會長這樣 HTML 簡單的一行 span <span></...

鐵人賽 自我挑戰組 DAY 21
網頁學習雜記 系列 第 21

技術 Day 21 | 變形的源頭 - transform-origin

昨天講了 transform, 今天來講跟他配合的 transform-origin。 先來講一下 transform-origin 的 keyword, x-...

鐵人賽 自我挑戰組 DAY 20
網頁學習雜記 系列 第 20

技術 Day 20 | 我變我變我變變變 - transform

最近剛好工作上被 transform 搞得超級煩, 決定就來介紹一下他。 剛剛認真去看了一下有哪些值, 發現 transform 有一個叫 matrix 的東東...

鐵人賽 Modern Web DAY 17
喪屍黑白切 系列 第 17

技術 Day 17 | 來跟我互動一下啊 - 圖文互動卡片

今天要講的是金魚都能懂的網頁切版 : 互動圖文卡片 NO002 本篇關鍵字 position: absolute top: 0、right: 0、bot...

鐵人賽 Elastic Stack on Cloud DAY 13

技術 喬叔教 Elastic - 13 - 管理 Index 的 Best Practice (5/7) - Transform

管理 Index 的 Best Practices 系列文章索引 (1/7) - Shard 的數量與 Rollover & Shrink API...

技術 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 當使用者在畫面上滑動的時...