---
# System prepended metadata

title: css3 transform vs canvas 2D transform

---

# css3 transform vs canvas 2D transform


[css transform](https://www.w3schools.com/cssref/css3_pr_transform.asp):
- translate
- scale
- rotate
- skew


# 練習一
| Before   | After    |
| -------- | -------- |
| ![before](https://i.imgur.com/NtQhUyx.png) | ![after](https://i.imgur.com/Oz8A0Jg.png) |

### 解法
- translate
- rotate container
- (不旋轉 container) transform-origin + rotate
    - 好處：顆粒度在 element，不在 container