技術 #49 CSS 2D Transform：變大、變小、旋轉、傾斜，CSS 絕對定位置中方法、平行四邊形

CSS 的 transform 屬性是一個功能強大的工具，它允許我們以簡單的方式對元素進行平移、縮放、旋轉和傾斜等 2D transform 效果，而不需要使用...

技術 Day14. 切版前知識(四) CSS進階屬性：Flexbox、transition、transform和更多

先祝大家中秋節快樂！雖然是休假，但鐵人賽不能休息啊嗚嗚不管怎麼說，還是趕快進入今天的內容吧～昨天談到CSS的基本認識並介紹了選擇器、常用屬性，忘記的記得回去看。...

技術 [快速入門前端 32] 進階樣式屬性 (2)：文字樣式和 2D Transform

文字空白及溢出樣式 White Space 屬性名：white-space (指定如何處理文字中的空白)屬性值：normal (預設)、pre (格式與文本完全...

技術 Day 20：它能不能動起來？【Tailwind – Transform 篇】

今天的 transform 篇會為大家示範 skew、translate、scale、rotate 結合前幾天所分享的 group-hover。 憑藉著 ta...

技術 JSXGraph的多邊形與轉換

今天要回來介紹JSXGraph的多邊形（Polygon）和轉換（Transformation）。 多邊形 Polygon是繼承自CoordsElement和Ge...

技術 Day 17 - Slider 改用 Transform 排序

經過這兩天花了許多時間重新複習研究 CSS Transform，設計範例，嘔心瀝血完成了 Transform 2D 及 Transform 3D 兩篇文章，感覺...

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

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

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

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

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

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

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

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

技術 喬叔教 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 跟 removeClas...

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

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

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

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

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

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

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

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

技術 Secret 11: 鑽石形圖片

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

技術 Secret 10: 平行四邊形

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

技術 Flip Card - 翻轉圖片

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