.

iT邦幫忙

2024 iThome 鐵人賽

DAY 4
0
Modern Web

探索HTML 與 CSS 的動態魔法系列 第 4

Day4 - CSS變形:探索 transform 屬性

  • 分享至 

  • xImage
  •  

今天要探討 transform 的基本用法。CSS 的 transform 屬性是強大的工具,可以對 HTML 元素進行各種幾何變形操作,如旋轉、縮放、平移和傾斜。這些變形效果可以使網頁中的元素更加生動。

1. 旋轉 (Rotate)

旋轉效果可以使用 rotate() 函數來實現,角度以度數表示:

  • 正值 : 順時針旋轉
  • 負值 : 逆時針旋轉。

範例

  • HTML 創建一個 class 為 rotate-box 的 div 元素
<div class="rotate-box"></div>
  • CSS 使用 transform : rotate 做順時針旋轉
.rotate-box {
    width: 100px;
    height: 100px;
    background-color: #e74c3c; /* 將元素的背景顏色設置為紅色。 */
    transform: rotate(45deg); /* 順時針旋轉 45 度 */
}

動畫

紅色的方塊被順時針旋轉了 45 度。

2. 縮放 (Scale)

縮放效果可以使用 :

  • scale() : 同時控制水平和垂直縮放
  • scaleX() : 控制水平縮放
  • scaleY() : 控制垂直縮放

範例

  • HTML 創建一個 class 為 scale-box 的 div 元素
<div class="scale-box"></div>
  • CSS 使用 transform : scale 在水平和垂直方向上放大
.scale-box {
   width: 100px;
   height: 100px;
   background-color: #3498db; /* 設置元素的背景顏色為藍色。 */ 
   margin: 50px auto; /* 設置上下邊距為 50 像素,並使元素水平居中。 */ 
}

.scale-box:hover {
   transform: scale(1.5);/* 當鼠標懸停在元素上時,將元素同時在水平和垂直方向上放大 1.5 倍。 */
}

動畫

藍色方塊的大小變成 1.5 倍。

3. 傾斜 (Skew)

傾斜效果可以使用 :

  • skew() : 同時控制水平和垂直方向的傾斜
  • skewX() : 控制水平傾斜
  • skewY() : 控制垂直傾斜

範例

  • HTML 創建一個 class 為 skew-box 的 div 元素
<div class="skew-box"></div>
  • CSS 使用 transform : skew 讓元素呈現扭曲效果
.skew-box {
    width: 100px;
    height: 100px;
    background-color: #2ecc71; /* 設置元素的背景顏色為綠色。 */
}

.skew-box:hover{
    transform: skew(20deg, 10deg); /* 當鼠標懸停在元素上時,水平傾斜 20 度,垂直傾斜 10 度。 */
}

動畫

4. 結合多個變形

transform 屬性還可以同時應用多個變形,通過空格分隔即可。

  • HTML 創建一個 class 為 transform-box 的 div 元素
<div class="transform-box"></div>
  • CSS 使用 transform : rotate scale 實現同時旋轉和縮放的效果
.transform-box {
   width: 100px;
   height: 100px;
   background-color: #f1c40f; /* 設置元素的背景顏色為黃色。 */
}

.transform-box:hover{
   transform: rotate(45deg) scale(1.2);
}

動畫

當鼠標懸停時,黃色方塊同時旋轉 45 度並放大 1.2 倍。


上一篇
Day3 - CSS過渡效果
下一篇
Day5 - 設計按鈕懸停效果
系列文
探索HTML 與 CSS 的動態魔法30
.
圖片
  直播研討會

尚未有邦友留言

立即登入留言