1-9. 變形 ＆ 動態效果
2D 變形
| 版本 | 屬性 | 說明 |
|---|---|---|
| 3 | transform | 以元素物件中央定位加以變形。 參考【英文版】 【英文版】 【簡中版】 【簡中版】 |
| 3 | transform-origin | 物件transform時定位原點的設定(預設 50% 50%)。 參考【英文版】 【簡中版】 |
針對藍色區塊測試各種2D變形 （如果沒有看到 藍色區塊，請捲動一下畫面！）
transform
====== 旋轉 ========
====== 縮放 ========
====== 偏移位置 ========
====== 傾斜 ========
3D 變形
針對藍色區塊測試各種3D變形 （如果沒有看到 藍色區塊，請捲動一下畫面！）
transform
由於靜態狀況之下 3D 的變形不易觀察，所以以下將 3D 的變形結合 animation 動畫，方便觀察。
#b4:hover { animation: testAni1 4s infinite; }
@keyframes testAni1 {
100% { transform: rotateX(360deg); }
}
#b4:hover { animation: testAni2 4s infinite; }
@keyframes testAni2 {
100% { transform: rotateY(360deg); }
}
#b4:hover { animation: testAni3 4s infinite; }
@keyframes testAni3 {
100% { transform: rotateZ(360deg); }
}
transition 互動動畫、轉場過程
滑鼠滑入以下物件, 會以動畫呈現轉場過程
| 範例 | HTML 及 CSS 設定 |
|---|---|
<button>按鈕</button>
button { font-size: 20px; padding: 10px 20px; margin: 10px;
border-radius: 5px; cursor: pointer;
transition: all 2s; }
button:hover { background-color: hotpink; }
|
|
 |
<div><img src="../images/flower/f1.jpg"></div>
div { width: 250px; height: 250px; overflow: hidden; }
div img { width: 100%; height: auto; transition: all 2s; }
div img:hover { transform: scale(5); opacity: 0.2; }
|
範例多練習：滑鼠滑入以下物件, 會以動畫呈現轉場過程
運用定位位置right
說明文字自右移入
網頁基礎排版
了解Dreamweaver設計軟體
認識基本的HTML與CSS
學習網頁版面的編排
初識網頁動態效果
運用變形的偏移位置
說明文字自下移入
網頁基礎排版
了解Dreamweaver設計軟體
認識基本的HTML與CSS
學習網頁版面的編排
初識網頁動態效果
運用定位位置right
說明文字中央放大
網頁基礎排版
了解Dreamweaver設計軟體
認識基本的HTML與CSS
學習網頁版面的編排
初識網頁動態效果
運用定位位置right
說明文字及影像分批中央放大
網頁基礎排版
了解Dreamweaver設計軟體
認識基本的HTML與CSS
學習網頁版面的編排
初識網頁動態效果
animation 自動動畫
| 版本 | 屬性 | 說明 |
|---|---|---|
| 3 | @keyframes | 設計動畫時, 得先安排動畫時間內樣式變化的屬性內容。 參考【英文版】 【英文版】 【簡中版】 【簡中版】 |
| 3 | animation | 設計執行動畫。 參考【英文版】 【英文版】 【簡中版】 【簡中版】 |
| 3 | animation-name | 執行的動畫名稱, 也就是 @keyframes 的名稱。 參考【英文版】 【簡中版】 |
| 3 | animation-duration | 執行動畫的持續時間。 參考【英文版】 【簡中版】 |
| 3 | animation-delay | 執行動畫前的延遲時間。 參考【英文版】 【簡中版】 |
| 3 | animation-direction | 執行動畫的時間軸方向。 參考【英文版】 【簡中版】 |
| 3 | animation-iteration-count | 執行動畫的反覆次數, 設定 infinite 表示持續不斷的反覆執行。 參考【英文版】 【簡中版】 |
針對藍色區塊測試各種 animation 動畫 （如果沒有看到 藍色區塊，請捲動一下畫面！）
animation
#b6 { animation-name: testAni1;
animation-delay: 2s;
animation-duration: 4s;
animation-iteration-count: 3; }
@keyframes testAni1 {
0% { }
25% { background-color: red;
50% { background-color: green; }
75% { background-color: blue; }
100% { }
}
#b6 { transform-origin: 0 0;
animation: testAni2 2s 1s infinite; }
@keyframes testAni2 {
0% { transform: rotate(15deg); }
50% { transform: rotate(75deg); }
100% { transform: rotate(15deg); }
}
#b6:hover { cursor: pointer;
animation: testAni3 1s infinite; }
@keyframes testAni3 {
50% { box-shadow: 0 0 20px red; }
}
線上互動學習 Visualizer
CSS 3D Transform Generator（還有其他 CSS 屬性）
CSS Transform Visualizer
TSuiling 
CSS 3D CSS Transform Front-end Tools（還有其他 CSS 屬性）
CSS Transform Visualizer
TSuiling
CSS 3D CSS Transform Toptal（還有其他 CSS 屬性）
CSS Transform Visualizer
CSS 2D & 3D CSS Transform functions visualizer
CSS Transform Visualizer
CSS Transform Generator （還有其他 CSS 屬性）
CSS Transform Visualizer
CSS 3D THE MATRIX CONSTRUCTION SET
CSS Transform Visualizer
TSuiling
Animation - Web Code Tools （還有其他 CSS 屬性）
CSS Animation Visualizer
Animation - CSS Animation Kit （還有其他 CSS 屬性）
CSS Animation Visualizer
TSuiling
Animation - animista Visualizer
CSS Animation Visualizer
TSuiling
線上可參考的範例如下：
Polypane CSS 3D 變換範例
CSS Transform Example
Freefrontend 45+ CSS 3D 範例
CSS Transform Example
線上可套用的動畫外掛：
