---
tags: 網頁切版直播班 - 2021 夏季班
---
# 8/17(二) 每日任務

## 題目

在 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 完成此作業*/
}

## 回報流程
1. 將答案寫在 Codepen 並複製 Codepen 連結貼至「回報區」中回報就算完成了喔～
解答及回報方式請參考下方


<!-- 解答：[Codepen 範例](https://codepen.io/AliceChiang/pen/MWKLjxg) -->

回報區
---
<!-- 0. Bingbingboom（回報範例，請使用註解回報）
Codepen：https://codepen.io/Bingbingboom/pen/RwpMMOG
-->

<!-- 1. Alpha
Codepen:https://codepen.io/alphatero/pen/YzVbVao
-->

<!-- 2. Vic
codepen: https://codepen.io/hsuan333/pen/WNjBjKp
-->

<!-- 3. 群嘉
codepen: https://codepen.io/efzdamnp-the-lessful/pen/oNWRWMO
-->

<!--4. Cheng pei-hsuan
codepen: https://codepen.io/PaCheng/pen/vYmMvaV
-->

<!-- 5. Lina Chen
codepen: https://codepen.io/LinaChen/pen/dyWEWqB
-->

<!-- 6. xing
codepen: https://codepen.io/xing10/pen/JjNqNex
-->

<!-- 7. 雷古娜
codepen:https://codepen.io/tinahopo/pen/WNjBjLj
-->

<!-- 8. Jean
codepen:https://codepen.io/jean-liu/pen/dyWEWgB
-->

<!-- 9. 肉鬆
codepen: https://codepen.io/klrkicog/pen/gOWJWqr
-->
<!-- 10. LiShnag
codepen: https://codepen.io/li-shang/pen/GRmameo
-->

<!-- 11. lumei
codepen: https://codepen.io/l_umei/pen/xxdNdeB
-->

<!-- 12. kevinhes
codepen: https://codepen.io/kevinhes/pen/eYWaWoj
-->

<!-- 13. Gui
https://codepen.io/guitimliu/pen/xxdNdNB -->

<!-- 14. huanan
https://codepen.io/hua_nan/pen/BaReZKZ
-->

<!-- 15. roger
https://codepen.io/rogerchuang/pen/NWjVgpX?editors=1100
-->

<!-- 16. Joy Cheng
https://codepen.io/joycheng5432/pen/KKmLqQG
-->

<!-- 17. Cate Chang
https://codepen.io/tutz/pen/bGWyRKM
-->

<!-- 18. Gill
codepen:https://codepen.io/Gill-Chin/pen/QWvRMxL
-->

<!-- 19. peter.chen
codepen: https://codepen.io/JIAN-RONG/pen/yLbWoma?editors=1100
-->

<!--20. 阿和
codepen:https://codepen.io/shnny/pen/yLbWzwv
-->

<!-- 21. Sz
https://codepen.io/szyln/pen/MWmdOPx
-->

<!--22. Tori
codepen: https://codepen.io/hayen/pen/yLbWPxZ?editors=1100
-->

<!--23. curry
codepen: https://codepen.io/Ted19851223/pen/QWvRaJW
-->

<!-- 24.阿瓜
https://codepen.io/hoick/pen/JjNqpve -->

<!-- 25. 蔡明達
CodePen: https://codepen.io/bmzpfyxe/pen/MWpMZyr?editors=1100
-->

<!-- 26. 陳sam
codepen:https://codepen.io/euldpliv/pen/OJmYvzx
-->

<!-- 27. hellocrab
https://codepen.io/hellocrab/pen/rNmgvqW
-->

<!-- 28: Sec
https://codepen.io/Sentiments/pen/dyWEqoW
-->

<!-- 29.沈依蓉
https://codepen.io/lily-oa/pen/yLbWGed
-->

<!-- 30. RitaHuang
https://codepen.io/Rita-Rossweisse/pen/bGWyOOP
-->

<!-- 31. KK
https://codepen.io/potatokaka/pen/qBmzbaq
-->

<!-- 32. Joe Kuo
https://codepen.io/alertislow/pen/jOmjWMJ
-->

<!-- 33. KinHei Shing
https://codepen.io/kinhei-shing/pen/VwbJedy
-->
<!-- 34. yella moon

https://codepen.io/pwbzvqja/pen/gOWNwNZ
-->

<!-- 35. Alberto
https://codepen.io/AlbertoLL/pen/dyWBRRy
-->

<!--36. Jocelyn
https://codepen.io/enjoyful/pen/gOWNRzm
-->

<!--37. Jim Hwang
https://codepen.io/jimh1129/pen/abWgyxW
-->

<!--38. axlrock1021
https://codepen.io/andy1021/pen/eYWwPBg
-->

<!--39. YuriT
https://codepen.io/wenfisht/pen/qBmzQwE
-->

<!-- 40. ZY Hsu
https://codepen.io/zihyin/pen/wvdLRex -->

<!--41. Oober
https://codepen.io/xtsjrjdv/pen/xxdvxYe
-->

<!--42. jimmyFang
https://codepen.io/pohxiqqo/pen/OJmKXNM?editors=1100
-->

<!--43. twoz
https://codepen.io/twoz/pen/qBmeqpo?editors=1100
-->

<!--44. Riley
https://codepen.io/jjpxbprd/pen/GRmbPaX
-->

<!-- 45. Min Chun Tsai
codepen: https://codepen.io/Tsai0926/pen/OJmKQzY
-->

<!-- 46. WilsonHan
https://codepen.io/wi0821/pen/BaRXrXZ
-->

<!-- 47. Sihle Huang
code: https://codepen.io/bugbug777/pen/yLbmmbQ
-->

<!-- 48. Hi Annie
https://codepen.io/lhohdalu/pen/KKqPPjM
-->

<!-- 49. Yurie
https://codepen.io/lhohdalu/pen/KKqPPjM
-->

<!-- 50. una
https://codepen.io/xbsapbas-the-vuer/pen/JjJPWWj?editors=1100
-->

<!-- 51. Sylvia-H
https://codepen.io/Cosmosheart/pen/LYLPOVB -->

<!-- 52.Elaine Liu
https://codepen.io/elaine7598/pen/GREKOoa -->

<!-- 53. ZOE WU
https://codepen.io/Zoechiueh/pen/wvewpWq?editors=1100-->

<!-- 54. Jessie Cheng
https://codepen.io/JessieMosbi/pen/mdwdoxg
-->

<!-- 55. Erin Huang
https://codepen.io/ErinHuang/pen/powvjab
-->

<!-- 56. Jun Chan
codepen: https://codepen.io/chujunchan/pen/rNwaeQO
-->

<!-- 57. AKI
https://codepen.io/akichen27/pen/xxrOgrN
-->

<!-- 58. Tina Yen
codepen:https://codepen.io/tlorfrnl-the-typescripter/pen/YzQGWYP
-->

<!-- 59.yellamoon
codepen:https://codepen.io/pwbzvqja/pen/gORwzXX
-->
<!-- 60.袁祥恩
codepen:https://codepen.io/ovfxsavp-the-bashful/pen/KKqaadV?editors=1100
-->