iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 6
1
Modern Web

網頁阿尼尛,到底是在幹尛?系列 第 6

第五章、上上下下左左右右AB Transform

  • 分享至 

  • xImage
  •  

前言

做動畫的第一步,當然就是讓元素移動囉!
在 CSS3 內我們可以使用很多方式來讓元素從 定位點A 移動至 定位點B,那麼本篇張我們來了解如何將敏捷值點到最高的 Transform 吧~

簡介

Transform 屬性可以將元素渲染到 視覺格式化空間(visual formatting model) 座標系統上,包括平移、旋轉、縮放、傾斜。

若 Transform 屬性的值為 none 他仍然會引響整個畫面佈局的 疊層上下文(stacking context) 以及 內容包含塊(containing block)

視覺格式化空間(visual formatting model):
視覺格式化空間決定了描述了使用者如何存取文檔樹(document tree) 以及 處理並且顯示在視覺媒體上(visual media)。

Tansform 基礎語法

tranfrom: Function values(X, Y)
名稱 說明
Function value 依據CSS數據類型影響的元素外觀轉換
X X軸上的變化數值(單位或百分比)
Y Y軸上的變化數值(單位或百分比)

Translate()

透過向量定位 [tx, ty] 來指定 2D Translation 的位置,txX軸數值 tyY軸 數值。

  • translateX(): 純粹指定元素在 X軸 平移的數量。
  • translateY(): 純粹指定元素在 Y軸 平移的數量。

特別要注意的是,在 translate 上使用百分比當單位時,該百分比是元素本身寬高的百分比值。
![](https://i.imgur.com/DyTjqNE.png =350x)

scale()

透過向量定位 [sx, sy] 來指定 2D Translation 縮放的大小,sx 為 沿著X軸縮放的數值 sy 為沿著 Y軸 縮放的數值,若沒有提供第二個數字,第二個數字的值就會等同於第一個值。
舉例來說,scale(1,1) 會使元素大小不改變,scale(2,2) 會使元素大小放大一倍。

  • scaleX(): 純粹指定元素沿著 X軸 縮放的數值。
  • sclateY(): 純粹指定元入沿著 Y軸 縮放的數值。

rotate()

透過向量定位指定沿著元素原始定位點來指定 2D Translation 旋轉的角度。

skew()

透過向量定位 [ax, ay] 來指定 2D Translation 傾斜的角度,ax 為 沿著X軸傾斜角度的數值 ay 為沿著 Y軸 傾斜角度的數值,若沒有提供第二個數字,第二個數字的值則為零。

  • skewX(): 純粹指定元素沿著X軸傾斜的角度。
  • skewY(): 純粹指定元素沿著Y軸傾斜的角度。

注意!
skew()會出現瀏覽器相容問題,要注意語法版本問題。
若因瀏覽器不兼容問題,請改用skewX()skewY()

感謝你的注意!

Transform Origin

當我們透過 Transfrom 屬性來對元素做位置變化時,也可以搭配 transfrom-origin 來設定元素的基準點。
在沒有指定基準點位置時,transfrom-origin 屬性預設數值為 由左到右、由上到下的 [50%,50%]

若是我們針對 transfrom-origin 僅指定一個數值,則第二個值為 [center]、第三個值為 [0],而我們若是指定了第一與第二個數值,則第三個數值為 [0]。

Transfrom Origin 基礎語法

  • length: 給予固定數值的偏移量,水平以及垂直偏移量的基準點為元素左上角。
  • top: 由上而下計算出元素位於 Y軸 [0%] 的位置。
  • bottom: 由上而下計算出元素位於 Y軸 [100%] 的位置。
  • left: 由左而右計算出元素位於 X軸 [0%] 的位置。
  • right: 由左而右計算出元素位於 X軸 [100%] 的位置。

必殺:認真系列 - 360 旋轉

認識完 Transfrom 的基礎語法之後,我們趕緊來練習新學會的必殺技:認真・360° 旋轉。

基礎架構

首先我們找到一張時鐘的圖片,將其拆分為 時鐘本體(outer) 以及 指針(inner)

<div class="outer">
	<div class="inner"></div>
</div>

元素定位

接著我們將準備好的素材放進去畫面渲染,並且將元素都定位好。

.outer {
  width: 500px;
  height: 500px;
  background-image: url(https://i.imgur.com/S8NmbbI.png);
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
}

.inner {
  width: 200px;
  height: 200px;
  background-image: url(https://i.imgur.com/Hf1e7cp.png);
  background-size: cover;
  background-repeat: no-repeat;
  position: absolute;
  top: 180px;
  left: 150px;
  transform-origin: 110px 125px;
}

設定旋轉基準點

由於我們是要靠著指針中心去讓指針旋轉,所以我們在指針的部分加上 transform-origin, 指定指針的旋轉基準點。並試著讓指針旋轉看看

.inner {
  width: 200px;
  height: 200px;
  background-image: url(https://i.imgur.com/Hf1e7cp.png);
  background-size: cover;
  background-repeat: no-repeat;
  position: absolute;
  top: 180px;
  left: 150px;
  transform-origin: 110px 125px;
  transfrom: rotate(90deg);
}

加上動畫效果

上面的部分其實就已經完成今天 Transfrom 的技巧運用囉,不過為了讓整個時鐘旋轉看起來更自然一點,我們借助 CSS3 Animation 屬性來讓指針不斷的旋轉。有關於 Animation 的部分我在後面會有更詳細的介紹。還請大家耐心等待~

.inner {
  width: 200px;
  height: 200px;
  background-image: url(https://i.imgur.com/Hf1e7cp.png);
  background-size: cover;
  background-repeat: no-repeat;
  position: absolute;
  top: 180px;
  left: 150px;
  transform-origin: 110px 125px;
  animation: clock 5s step-start both infinite;
}

@keyframes clock {
  0%{
    transform: rotate(0deg);
  }
  12.5% {
    transform: rotate(45deg);
  }
  25% {
    transform: rotate(90deg);
}
  37.5% {
    transform: rotate(135deg);
}
  50% {
    transform: rotate(180deg);
}
  62.5% {
    transform: rotate(225deg);
}
  75% {
    transform: rotate(270deg);
  }
  87.5% {
    transform: rotate(315deg);
}
  100% {
    transform: rotate(360deg);
  }
}

完成


呼~ 今天的練習有沒有很辛苦呢? 相信大家經過鍛鍊之後,變強也變禿了對吧?
那麼今天的 Transfrom 2D 就先介紹到這邊,我們明天會再更進階的介紹 Transfrom 3D 的語法以及帶著大家實做一些小動畫,那麼,明天見!


參考資料


上一篇
第四章、今晚,我想來點...雙重口感切換的 Transition
下一篇
第六章、和我簽訂契約,成為魔法少女吧! Transform 3D (上篇)
系列文
網頁阿尼尛,到底是在幹尛?30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
咖咖拉
iT邦好手 1 級 ‧ 2020-12-29 15:58:40

文章中skew()的支援度 似乎有問題
看到CAN I USE 這麼紅嚇到

我自己測試用autoprefixer 來寫的話
IE11能支援Safari手機筆電都能正常顯示

    -webkit-transform: skew(17deg, 13deg);
    -ms-transform: skew(17deg, 13deg);
    transform: skew(17deg, 13deg);

回報樓主~

CathyShen iT邦新手 4 級 ‧ 2020-12-30 10:02:33 檢舉

感謝回報!使用 skew() 真的要特別小心呢~

咖咖拉 iT邦好手 1 級 ‧ 2020-12-30 10:12:47 檢舉

CAN I USE 好像有錯誤

skew()在IE11都能正常顯示了

我要留言

立即登入留言