---
# System prepended metadata

title: "\U0001F3C5 Day 43"
tags: [網頁切版直播班 - 2022 夏季班]

---

---
tags: 網頁切版直播班 - 2022 夏季班
---
# 🏅 Day 43

## 練習 transform

### 題目


在 CSS 的 `.card` hover 時加上 `transform` 語法使圖片可以水平旋轉 180 度 （需透過 Codepen 繳交）


HTML
```htmlmixed=
<div class="card">
  <div class="card-img">
    <img src="https://www.filepicker.io/api/file/tNa2so2RRMuedpc2yydt" alt="Avatar" width="200">
  </div>
</div>
```


CSS

```css=
.card{
  width: 300px;
  height: 300px;
}
.card-img{
  text-align: center;
  background: #e8eeea;
  transition: transform 0.6s;
}
.card:hover .card-img {
/*   請使用 transform 完成此作業*/
}

```


## 回報流程

將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔! 
解答位置請參考下圖（需打開程式碼的部分觀看）

![](https://i.imgur.com/vftL5i0.png)

<!-- 解答：https://codepen.io/hexschool/pen/ExEeRda -->




回報區
---


|      Discord      |                           CodePen / 答案                            |
|:-----------------:|:-------------------------------------------------------------------:|
|  Iris Huang#6727  |          [CodePen](https://codepen.io/ythuang/pen/abYMmzb)          |
|   CloThEs #7837   |         [CodePen](https://codepen.io/CloThEsZ/pen/ExEJaMP)          |
|    布魯諾#7239    |         [CodePen](https://codepen.io/bruno-yu/pen/dymLvrv)          |
|      YC#2522      |           [CodePen](https://codepen.io/YCLu/pen/JjLVWzK)            |
| bonnieli1414#4906 | [CodePen](https://codepen.io/bonnieli1414/pen/mdxgWgp?editors=1100) |
|     zera#6060     |        [codepen](https://codepen.io/zera-tseng/pen/bGvJWGQ)         |
|   WEI_RIO#9342    |          [Codepen](https://codepen.io/wei_wu/pen/KKoYmdj)           |
|     Hsiu#8767     |         [Codepen](https://codepen.io/amy-hsiu/pen/vYRMmyR)          |
|  StellaHsu#2687   |       [Codepen](https://codepen.io/stella950114/pen/yLKrbJL)        |
|     大衛#4869     |   [Codepen](https://codepen.io/exnsrpjc/pen/PoRgmqB?editors=1100)   |
|    Cliff#4606     |  [Codepen](https://codepen.io/Cliff_hex/pen/wvmZdpb?editors=1100)   |
|    azami#5986     |           [CodePen](https://codepen.io/azami/pen/ZExZKrO)           |
|  LHchien33#6232   |         [CodePen](https://codepen.io/lin_chien/pen/OJvGmEG)         |
|     威爾#1694     |          [CodePen](https://codepen.io/WILL_Wu/pen/LYdvyam)          |
|    黃士桓#7654    |      [codePen](https://codepen.io/shr-huan-huang/pen/XWEQRxR)       |
|    Benson#6763    |         [codepen](https://codepen.io/kumashow/pen/abYxWrE)          |
|     yuyu#6310     |         [codepen](https://codepen.io/yuyu0905/pen/ZExZKde)          |
|   LinaChen#1796   |         [codepen](https://codepen.io/LinaChen/pen/PoRgmdg)          |
|    Sweet#5415     |         [codepen](https://codepen.io/Pei-Ying/pen/mdxgwdg)          |
|  Potatolee#7749   |        [codepen](https://codepen.io/potatoleee/pen/VwXNWYq)         |
|  PeggyLiao#1552   |  [CodePen](https://codepen.io/PeiJu-Liao/pen/xxWerVz?editors=1100)  |
|    Arista#5802    |       [CodePen](https://codepen.io/arista-hsieh/pen/ExEJXNL)        |
|   Jenny真#7532    | [CodePen](https://codepen.io/wei-chen-wu/pen/zYWXzZj?editors=1100)  |
|    Joyce#3790     |        [CodePen](https://codepen.io/joycehuang/pen/YzaMQam)         |
|     int#7518      |   [Codepen](https://codepen.io/intHuang/pen/abYxwRP?editors=1100)   |
|      Ke#1391      |         [Codepen](https://codepen.io/federerke/pen/wvmZqKq)         |
|     雷雷#7844     |        [Codepen](https://codepen.io/lei-yi-jie/pen/gOeyxvG)         |
|     Chi#7605      |         [Codepen](https://codepen.io/YoChi84/pen/YzaMxRV)           |
|威0#6919|[codepen](https://codepen.io/n0918679182/pen/PoRgKre?editors=1100)|
|JackC0411|[codepen](https://codepen.io/key0329/pen/GRxLMKx)|
| Clara#1275 |         [Codepen](https://codepen.io/bsupixqu/pen/ZExZXGY)           |
|QOO#8446|[codepen](https://codepen.io/QOOQOOQ/pen/YzaMrqY?editors=1100)|
|我是泇吟 #5189|[CodePen](https://codepen.io/kljuqbxs/pen/oNqOGPq)|
|Vian#7338|[CodePen](https://codepen.io/vianwu31/pen/zYWXPbM?editors=1100)|
| JarDar#6980 |[codepen](https://codepen.io/jardarpen/pen/JjLVLvw)|
|ssozr#4680|[codepen](https://codepen.io/ssozr/pen/bGvJMyx)|
|949cat 𓃠#2154|[codepen](https://codepen.io/Ariel_Chen/pen/yLKrENm?editors=1100)|
| Amberhh #2465 | [Codepen](https://codepen.io/Amberhh/pen/ExEzxwL) |
| Henry#7386 | [Codepen](https://codepen.io/h1nr9/pen/yLKWygq) |
|  YU #0618  |          [CodePen](https://codepen.io/yoken_/pen/poLmbLP)          |
|  鉦勝 #8333  |          [CodePen](https://codepen.io/atckmax823/pen/QWmRdWb)       |
|SASIMI#5099|[Codepen](https://codepen.io/sashimi1327/pen/WNzBEBK)|
|yen#5757|[Codepen](https://codepen.io/TZU-HUANG-YEN/pen/ZExNagx)|
|NeilLin#3009|[Codepen](https://codepen.io/a0071421/pen/BarerLX)|
|L0F0#8733|[Codepen](https://codepen.io/l0f0/pen/oNqRPqg)|
|黑白兔#0684|[Codepen](https://codepen.io/johnny329/pen/jOzjMKZ)|
|YI#0863|[Codepen](https://codepen.io/YI0305/pen/poLXxPq)|
|Tuhacrt#0008|[Codepen](https://codepen.io/Tuhacrt/pen/bGvPXQR)|
|kevin#6131|[Codepen](https://codepen.io/xlqjezvc-the-encoder/pen/abYeJNG)|
|肉桂卷#0625|[Codepen](https://codepen.io/ginnlee/pen/YzamVXw?editors=0100)|
|mei#8421|[Codepen](https://codepen.io/Shila-Chen/pen/ExEqzMa)|
|kancheng#3915|[Codepen](https://codepen.io/kancheng/pen/poVzdGJ)|
|IreneY#0086|[Codepen](https://codepen.io/HalfPlannedJourney/pen/QWrWMZN)|
|Shuo#1596|[Codepen](https://codepen.io/chiangchungshuo/pen/ZEoGNry)|
|sophiee#7015|[Codepen](https://codepen.io/sophiee2727/pen/WNJroRq)|
|Vera#5592|[Codepen](https://codepen.io/skvera/pen/zYjwjdq)|
|Mylène#2481|[Codepen](https://codepen.io/hamajibashi/pen/qBYPERW)|
|Melon#0380|[Codepen](https://codepen.io/BalaFang/pen/rNvZZRN)|