做動畫的第一步,當然就是讓元素移動囉!
在 CSS3 內我們可以使用很多方式來讓元素從 定位點A 移動至 定位點B,那麼本篇張我們來了解如何將敏捷值點到最高的 Transform 吧~
Transform 屬性可以將元素渲染到 視覺格式化空間(visual formatting model) 座標系統上,包括平移、旋轉、縮放、傾斜。
若 Transform 屬性的值為 none
他仍然會引響整個畫面佈局的 疊層上下文(stacking context) 以及 內容包含塊(containing block)
視覺格式化空間(visual formatting model):
視覺格式化空間決定了描述了使用者如何存取文檔樹(document tree) 以及 處理並且顯示在視覺媒體上(visual media)。
tranfrom: Function values(X, Y)
名稱 | 說明 |
---|---|
Function value | 依據CSS數據類型影響的元素外觀轉換 |
X | X軸上的變化數值(單位或百分比) |
Y | Y軸上的變化數值(單位或百分比) |
透過向量定位 [tx, ty] 來指定 2D Translation 的位置,tx
為 X軸數值 ty
為 Y軸 數值。
特別要注意的是,在 translate
上使用百分比當單位時,該百分比是元素本身寬高的百分比值。
![](https://i.imgur.com/DyTjqNE.png =350x)
透過向量定位 [sx, sy] 來指定 2D Translation 縮放的大小,sx
為 沿著X軸縮放的數值 sy
為沿著 Y軸 縮放的數值,若沒有提供第二個數字,第二個數字的值就會等同於第一個值。
舉例來說,scale(1,1) 會使元素大小不改變,scale(2,2) 會使元素大小放大一倍。
透過向量定位指定沿著元素原始定位點來指定 2D Translation 旋轉的角度。
透過向量定位 [ax, ay] 來指定 2D Translation 傾斜的角度,ax
為 沿著X軸傾斜角度的數值 ay
為沿著 Y軸 傾斜角度的數值,若沒有提供第二個數字,第二個數字的值則為零。
注意!
skew()
會出現瀏覽器相容問題,要注意語法版本問題。
若因瀏覽器不兼容問題,請改用skewX()
與skewY()
感謝你的注意!
當我們透過 Transfrom 屬性來對元素做位置變化時,也可以搭配 transfrom-origin
來設定元素的基準點。
在沒有指定基準點位置時,transfrom-origin
屬性預設數值為 由左到右、由上到下的 [50%,50%]。
若是我們針對 transfrom-origin
僅指定一個數值,則第二個值為 [center]、第三個值為 [0],而我們若是指定了第一與第二個數值,則第三個數值為 [0]。
認識完 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 的語法以及帶著大家實做一些小動畫,那麼,明天見!
文章中skew()的支援度 似乎有問題
看到CAN I USE 這麼紅嚇到
我自己測試用autoprefixer 來寫的話
IE11能支援Safari手機筆電都能正常顯示
-webkit-transform: skew(17deg, 13deg);
-ms-transform: skew(17deg, 13deg);
transform: skew(17deg, 13deg);
回報樓主~
感謝回報!使用 skew() 真的要特別小心呢~
CAN I USE 好像有錯誤
skew()在IE11都能正常顯示了