css3如何實現旋轉縮放動畫效果

# CSS3如何實現旋轉縮放動畫效果

CSS3為網頁動畫提供了強大的支持，其中旋轉（rotate）和縮放（scale）是最常用的動畫效果之一。本文將詳細介紹如何利用CSS3的`transform`和`transition`/`animation`屬性實現這兩種效果。

## 一、基礎概念

### 1. transform屬性
`transform`是CSS3的核心動畫屬性，支持以下常用函數：
- `rotate()`：旋轉元素（單位：deg）
- `scale()`：縮放元素（無單位或百分比）
- `translate()`：移動元素
- `skew()`：傾斜元素

### 2. 動畫實現方式
- **過渡動畫**：通過`transition`實現狀態間的平滑過渡
- **關鍵幀動畫**：通過`@keyframes`定義復雜動畫序列

## 二、旋轉動畫實現

### 1. 基礎旋轉
```css
.box {
  width: 100px;
  height: 100px;
  background: #3498db;
  transition: transform 0.5s ease;
}

.box:hover {
  transform: rotate(45deg); /* 順時針旋轉45度 */
}

2. 3D旋轉

.box-3d {
  transform-style: preserve-3d;
  transform: rotateX(15deg) rotateY(30deg);
}

3. 持續旋轉動畫

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.spinner {
  animation: spin 2s linear infinite;
}

三、縮放動畫實現

1. 基礎縮放

.element {
  transition: transform 0.3s;
}

.element:hover {
  transform: scale(1.2); /* 放大到1.2倍 */
}

2. 非等比縮放

.element {
  transform: scaleX(1.5) scaleY(0.8); /* 寬度放大，高度縮小 */
}

3. 脈沖效果

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.pulse {
  animation: pulse 2s infinite;
}

四、組合動畫效果

1. 旋轉+縮放組合

@keyframes rotate-scale {
  0% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.5) rotate(180deg); }
  100% { transform: scale(1) rotate(360deg); }
}

.combo {
  animation: rotate-scale 3s ease-in-out infinite;
}

2. 帶延遲的序列動畫

.multi-animation {
  animation: 
    scale-up 0.5s ease-out,
    rotate 1s 0.5s ease-in-out;
}

@keyframes scale-up {
  to { transform: scale(1.2); }
}

@keyframes rotate {
  to { transform: rotate(90deg); }
}

五、性能優化技巧

1. 硬件加速：

.optimized {
  transform: translateZ(0);
  backface-visibility: hidden;
}

1. will-change屬性：

.will-change {
  will-change: transform;
}

1. 減少重排：優先使用transform/opacity等不影響布局的屬性

六、實際應用案例

1. 加載動畫

.loader {
  width: 50px;
  height: 50px;
  border: 5px solid #f3f3f3;
  border-top: 5px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

2. 圖片懸停效果

.gallery img {
  transition: transform 0.3s;
}

.gallery img:hover {
  transform: scale(1.05) rotate(2deg);
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

七、瀏覽器兼容性

1. 現代瀏覽器均良好支持（需加前綴版本）
2. IE9+支持2D變換，IE10+支持3D變換
3. 推薦使用Autoprefixer工具自動添加前綴

/* 帶前綴的示例 */
.element {
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

通過靈活組合這些技術，開發者可以創建出豐富的視覺交互效果，顯著提升用戶體驗。CSS3動畫相比JavaScript實現的優勢在于更好的性能和更流暢的渲染效果。 “`