前端深入之css篇丨2020年，徹底掌握css動畫【transform】

不是酸檸檬發表於2019-10-30
前端CSS動畫ORM

寫在前面

已經2020年了，不知道小夥伴們今年學習了css3動畫了嗎？

說起來css動畫是一個很尬的事，一方面因為公司用css動畫比較少，另一方面大部分開發者習慣了用JavaScript來做動畫，所以就導致了許多程式設計師比較排斥來學習css動畫（至少我是），但是一個不懂css動畫的前端工程師不能稱之為掌握css3，其實當你真正學習css動畫之後，你會被它的魅力所吸引的，它可以減少程式碼量、提高效能。

這是一個系列文章，共分為四篇。

前端深入之css篇丨2020年，徹底掌握css動畫【transition】

前端深入之css篇丨2020年，徹底掌握css動畫【animation】

前端深入之css篇丨2020年，徹底掌握css動畫【transform】

前端深入之css篇丨初探【transform】，手把手帶你實現1024程式設計師節動畫

前面幾篇文章我們已經一起學習了animation和transition 的使用，今天我們終於開始學習transform和translate了，其實translate只是transform的一個屬性，只是很多初學者對transform（變形）、translate（移動）和transition（過渡）容易混淆，所以我把它們放到一塊來寫了，小夥伴們可不要混淆啊。

話不多說，馬上跟我一起學習今天的主角transform吧。

transform 語法

值 描述
none 定義不進行轉換。
translate(x,y) 定義 2D 轉換。
translate3d(x,y,z) 定義 3D 轉換。
translateX(x) 定義轉換，只是用 X 軸的值。
translateY(y) 定義轉換，只是用 Y 軸的值。
translateZ(z) 定義 3D 轉換，只是用 Z 軸的值。
scale(x[,y]?) 定義 2D 縮放轉換。
scale3d(x,y,z) 定義 3D 縮放轉換。
scaleX(x) 通過設定 X 軸的值來定義縮放轉換。
scaleY(y) 通過設定 Y 軸的值來定義縮放轉換。
scaleZ(z) 通過設定 Z 軸的值來定義 3D 縮放轉換。
rotate(angle) 定義 2D 旋轉，在引數中規定角度。
rotate3d(x,y,z,angle) 定義 3D 旋轉。
rotateX(angle) 定義沿著 X 軸的 3D 旋轉。
rotateY(angle) 定義沿著 Y 軸的 3D 旋轉。
rotateZ(angle) 定義沿著 Z 軸的 3D 旋轉。
skew(x-angle,y-angle) 定義沿著 X 和 Y 軸的 2D 傾斜轉換。
skewX(angle) 定義沿著 X 軸的 2D 傾斜轉換。
skewY(angle) 定義沿著 Y 軸的 2D 傾斜轉換。
perspective(n) 為 3D 轉換元素定義透視檢視.

transform字面上就是變形，改變的意思。看起來他有很多屬性，其實我們把常用的總結起來就是下面四個屬性。

  • rotate(旋轉)
  • skew(扭曲)
  • scale(縮放)
  • translate(移動)

rotate 旋轉

前端深入之css篇丨2020年，徹底掌握css動畫【transform】

<style>
img{
    margin-left: 50px;
    width:50px;
    height:50px;
    border-radius:50%;
}
@keyframes rotate{
    0%   {transform:rotate(0deg);}	
    100%   {transform:rotate(360deg);}
}
@keyframes rotateX{
    0%   {transform:rotateX(0deg);}	
    100%   {transform:rotateX(360deg);}
}
@keyframes rotateY{
    0%   {transform:rotateY(0deg);}	
    100%   {transform:rotateY(360deg);}
}

.rotate{
    animation:rotate 2s infinite linear;
}
.rotateX{
    animation:rotateX 2s infinite linear;
}
.rotateY{
    animation:rotateY 2s infinite linear;
}
</style>
<body>
    <img src="./y.png" alt="" class="rotate">
    <img src="./y.png" alt="" class="rotateX">
    <img src="./y.png" alt="" class="rotateY">
</body>
複製程式碼

這裡一共有三個屬性的展示rotate，rotateX，rotateY。分別代表在平面上根據指定角度進行旋轉、沿著X軸進行指定角度的旋轉、沿著Y軸進行制定角度的旋轉。

translate 移動

前端深入之css篇丨2020年，徹底掌握css動畫【transform】

<style>
img{
    margin-left: 50px;
    width:50px;
    height:50px;
    border-radius:50%;
}
@keyframes translate{
    0%   {transform:translate(0px,0px);}	
    100%   {transform:translate(100px,100px);}
}
@keyframes translateX{
    0%   {transform:translateX(0px);}	
    100%   {transform:translateX(100px);}
}
@keyframes translateY{
    0%   {transform:translateY(0px);}	
    100%   {transform:translateY(100px);}
}

.translate{
    animation:translate 2s infinite linear;
}
.translateX{
    animation:translateX 2s infinite linear;
}
.translateY{
    animation:translateY 2s infinite linear;
}
</style>
<body>
    <img src="./y.png" alt="" class="translate">
    <img src="./y.png" alt="" class="translateX">
    <img src="./y.png" alt="" class="translateY">
</body>
複製程式碼

這裡一共有三個屬性的展示translate(x,y)，translateX(x)，translateY(Y)。分別代表水平方向和垂直方向同時移動、僅水平方向移動、僅垂直方向移動。

scale 縮放

前端深入之css篇丨2020年，徹底掌握css動畫【transform】

<style>
img{
    margin-left: 50px;
    width:50px;
    height:50px;
    border-radius:50%;
}
@keyframes scale{
    0%   {transform:scale(0.1,0.1);}	
    100%   {transform:scale(1,1);}
}
@keyframes scaleX{
    0%   {transform:scaleX(0.1);}	
    100%   {transform:scaleX(1);}
}
@keyframes scaleY{
    0%   {transform:scaleY(0.1);}	
    100%   {transform:scaleY(1);}
}

.scale{
    animation:scale 2s infinite linear;
}
.scaleX{
    animation:scaleX 2s infinite linear;
}
.scaleY{
    animation:scaleY 2s infinite linear;
}

</style>
<body>
    <img src="./y.png" alt="" class="scale">
    <img src="./y.png" alt="" class="scaleX">
    <img src="./y.png" alt="" class="scaleY">
</body>
複製程式碼

這裡一共有三個屬性的展示scale(x,y)，scaleX(x)，scaleY(Y)。分別代表水平方向和垂直方向同時縮放、僅水平方向縮放、僅垂直方向縮放。但它們具有相同的縮放中心點和基數，其中心點就是元素的中心位置，縮放基數為1，如果其值大於1元素就放大，反之其值小於1，元素縮小。

skew 扭曲

前端深入之css篇丨2020年，徹底掌握css動畫【transform】

<style>
img{
    margin-left: 50px;
    width:50px;
    height:50px;
    /* border-radius:50%; */
}
@keyframes skew{
    0%   {transform:skew(0deg,0deg);}	
    100%   {transform:skew(25deg,25deg);}
}
@keyframes skewX{
    0%   {transform:skewX(0deg);}	
    100%   {transform:skewX(25deg);}
}
@keyframes skewY{
    0%   {transform:skewY(0deg);}	
    100%   {transform:skewY(25deg);}
}

.skew{
    animation:skew 2s infinite linear;
}
.skewX{
    animation:skewX 2s infinite linear;
}
.skewY{
    animation:skewY 2s infinite linear;
}
</style>
<body>
    <img src="./y.png" alt="" class="skew">
    <img src="./y.png" alt="" class="skewX">
    <img src="./y.png" alt="" class="skewY">
</body>
複製程式碼

這裡一共有三個屬性的展示skew(x,y)，skew(x)，skewY(Y)。分別代表水平方向和垂直方向同時扭曲、僅水平方向扭曲、僅垂直方向扭曲。

結論

今天我們一起學習了transform的常見屬性，你會發現他們其實非常簡單，你只需要記住rotate(旋轉)、skew(扭曲)、scale(縮放)、translate(移動)就可以了，所代表的的含義就是會像X和Y軸同時變形，而加上X或者Y就代表會向著該方向進行變形。

到現在為止我們一起學完了css3動畫的所有內容，剩下的就需要你來多加練習，在其他網站上看到了有趣的動畫要想辦法用css動畫來實現它，在你真正練習過之後，你將會真正掌握它，這樣你就算做在2020年掌握了css動畫！

結語

以上就是本文章的全部內容了，如果有不正確的地方歡迎指正。

感謝您的閱讀，如果感覺有用不妨點贊/轉發。

前端深入系列是一個踩坑系列，是由我本人對工作和學習中所遇到的問題和踩過的坑的一個探索與總結，在此記錄分享出去，同時也是對自我技能的一個反思和追問。

前端路漫，踩坑不斷。

前端深入系列持續更新中……

以上2019-10-30。

相關文章