[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (3)

章節連結

有鑑於用遍不少的前端 UI 框架,對於其 CSS 特效往往是不知其所以然。若要依情況改寫的話,便遇上了不小困難。Udemy 上的 CSS3 Animations, Transforms and Transitions Ultimate Guide 課程有不少的範例和實作簡介,便決定從此來下手。這邊筆記下基礎的 transitions 的 Resizing 和 Spinning 環節。
css3 logo


課程相關資訊

[連結]:https://www.udemy.com/course/css3-animations-transforms-and-transitions-ultimate-guide/

本篇範圍:Chapter 2 ( Transforms )

請注意:本系列文章為個人對應課程的消化吸收後,所整理出來的內容。換言之,並不一定會包含全部的課程內容,也有可能會添加其他資源來說明。


內容

1. scale:把物件在二維的空間內進行縮放
2. x 為水平向;y 為垂直向,能接受的數值為整數、0 和小數
3. 數值代表的是原本的 N 倍
4. rotate:把物件在二維的空間內旋轉
5. 正值為:順時針;負值為:逆時針
6. 角度的話有四種單位: 360 deg = 400 grad = 6.28 rad = 1 turn


系列文章

  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (7)
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (6)
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (5)
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (4)
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (2)
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (1)
  • 按讚加入粉絲團

    延伸閱讀