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

## 練習 transform

### 題目

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

HTML

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

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://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)|