iT邦幫忙

2024 iThome 鐵人賽

DAY 13
0
自我挑戰組

HTML跨平台網頁設計系列 第 13

變形、轉換與動畫

  • 分享至 

  • xImage
  •  

變形效果
transform:變形效果
transform屬性可以設定元素的變形效果,分成移動、縮放、旋轉、傾斜。

  • 移動translate
    可以利用x,y參數移動元素,預設會以元素區域的中央為基準點。
  • 縮放scale()
    可依照其中x,y的參數像兩個軸的方向進行倍數縮放。
  • 旋轉rotate()
    可依設定的角度以元素區域的中央為基準點進行順時針旋轉。
  • 傾斜skew()
    依照其中x,y參數像兩軸的方向進行角度傾斜,預設也是以元素中央為基準點。
    轉換效果
    transition-duration:播放時間,單位為秒。
    transition-property:轉換屬性
    transition-timing-function:轉換方法有多種選擇,包含ease, linear, ease-in, ease-out, ease-in-out
    transition-delate:延遲時間
    transition:播放時間 轉換屬性 轉換方法 延遲時間

上一篇
盒子模型與版面定位
下一篇
JavaScript語法與結構
系列文
HTML跨平台網頁設計30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言