前端深刻之css篇丨2020年前，完全掌握css動畫【transform】

時間 2019-11-06

標籤前端深刻 css 2020年完全掌握動畫 transform 欄目 CSS 简体版

原文原文鏈接

寫在前面

立刻就2020年了，不知道小夥伴們今年學習了css3動畫了嗎？css

提及來css動畫是一個很尬的事，一方面由於公司用css動畫比較少，另外一方面大部分開發者習慣了用JavaScript來作動畫，因此就致使了許多程序員比較排斥來學習css動畫（至少我是），可是一個不懂css動畫的前端工程師不能稱之爲掌握css3，其實當你真正學習css動畫以後，你會被它的魅力所吸引的，它能夠減小代碼量、提升性能。html

前面幾篇文章咱們已經一塊兒學習了animation和transition 的使用，若是有不瞭解的同窗能夠查看個人以前的文章。前端

今天咱們終於開始學習transform和translate了，其實translate只是transform的一個屬性，只是不少初學者對transform（變形）、translate（移動）和transition（過渡）容易混淆，因此我把它們放到一塊來寫了，小夥伴們可不要混淆啊。css3

話很少說，立刻跟我一塊兒學習今天的主角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字面上就是變形，改變的意思。看起來他有不少屬性，其實咱們把經常使用的總結起來就是下面四個屬性。css3動畫

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

rotate 旋轉

<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 移動

<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 縮放

<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 扭曲

<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>
複製代碼