css3中變形與動畫（一）

css3製做動畫的幾個屬性：變形(transform)，過渡(transition)和動畫(animation)。

首先介紹transform變形。

transform英文意思：改變，變形。

css3中transform主要包括如下幾種：旋轉(rotate),扭曲(skew)，縮放（scale)、移動(translate)和矩陣變形matrix。

語法：

transform ： none | <transform-function> [ <transform-function> ]* 
transform: rotate | scale | skew | translate |matrix;

none就是默認值，不進行變形。

<transform-function>:表示一個或多個變換函數，以空格分開。便可同時對一個元素進行transform的多種屬性操做，例如同時用rotate,scale和translate三種。

rotate(<rotate-angle> [<cx> <cy>])
skewX(<skew-angle>)
skewY(<skew-angle>)
scale(<sx> [<sy>])
translate(<tx> [<ty>])
matrix(<a> <b> <c> <d> <e> <f>)

1、旋轉rotate

rotate(<angle>) :經過指定的角度參數對元素指定一個2D rotation(2D旋轉)，需先有transform-origin屬性的定義。

transform-origin定義的是旋轉的基點，其中angle是指選擇角度，正順時針旋轉，負逆時針旋轉。

rotate是一個頗有用的動畫，可配合animation作出很是有意思的效果，看綜合實例效果。

2、translate平移

translate()函數能夠把元素從原來的位置移動，而不影響在x，y軸上的任何web組件，相似於position:relative。

根據給定的left（x座標），top(y座標)位置參數，元素從其當前位置移動。

translate()分三種狀況：

一、translate(x,y)水平和垂直方向同時移動。

Note:translate移動的基點默認爲元素中心點，能夠根據transform-origin改變基點。

若是第二個值沒設置，默認爲0。

二、translateX(x)僅水平方向移動。

至關於translate(x,0,)的簡寫，基點爲元素中心點。

三、translateY(y)僅垂直方向移動。

至關於translate(0,y)的簡寫，基點爲元素在中心。

3、scale縮放

scale縮放和translate移動很是類似，也有三種狀況。

縮放中心點：即元素的中心位置

基數：縮放就是既能夠縮小，也能夠放大；縮放基數爲1，大於1放大，小於1縮小。

一、scale(x,y)元素在水平和垂直方向同時縮放。

Note：第二個參數未提供則取與第一個同樣的值。

 

二、scaleX(x)x軸縮放。

三、scaleY(y)y軸縮放。

 

scale能夠取負值，負值會讓元素翻轉並縮放。

<style>
    div {
    width: 100px;
    height: 100px;
    border-top: 1px dotted orange;
    border-right: 1px solid red;
    border-bottom: 1px solid pink;
    border-left: 1px solid green;
    text-align: center;
    line-height: 100px;
    color: red;
    font-size: 15px;
    transform: scale(-1.5);
    margin: 0 auto;
    margin-top: 50px;
}
</style>
<div>Scale(-1.5)</div>

View Code

 

4、skew切變

這個屬性是用來製做傾斜度的,設計時在2d裏面建立3d透視圖的時候必須的屬性。

skew和translate、scale同樣有三種狀況。

一、skew(x,y):x軸和y軸上的skew transformation（斜切變換）。

即x軸和y軸同時按照必定的角度值進行扭曲變形。

若是第二個參數未提供，則值爲0，也就是y軸無斜切。

二、 skewX(x):按給定角度沿x軸指定一個skew transformation（斜切變換）。

 

三、skewY(y):按給定的角度沿Y軸指定一個skew transformation（斜切變換）。

 

5、矩陣matrix

matrix(<number>, <number>, <number>, <number>, <number>, <number>):以一個含六值的(a,b,c,d,e,f)變換矩陣的形式指定一個2D變換,至關於直接應用一個[a,b,c,d,e,f]變換矩陣。就是基於水平方向和垂直方向從新定位元素。

SVG，css3，html5的canvas中都有矩陣變換，接下來簡單說說。

一個元素渲染後就能夠獲得一張位圖，而後對這個位圖上每一點進行變換，就能夠獲得新的一張位圖，從而產平生移，縮放，旋轉，切變及鏡像反射等效果。

一、幾個概念

• 矩陣乘法中，首先要確認兩個矩陣是否能夠相乘：只有第一個矩陣的列數等於第二個矩陣的行數，這樣的兩個矩陣才能相乘。
• 左乘【前乘】：即乘在左邊，A左乘E即AE。
• 一個m*n的矩陣左乘一個n*p的矩陣，將獲得一個m*p的矩陣。

2D矩陣變換都提供6個參數a,b,c,d,e,f，基本公式爲：

其中，x和y是元素最開始的座標，x'和y'是矩陣變換後獲得的新座標。

Note:變換矩陣中a,b,c,d,e,f6個參數是豎着排的。

x'=ax+cy+e
y'=bx+dy+f

二、矩陣變換和transform的關係

a、矩陣和translate平移

x'=ax+ cy+e，咱們設a=1,c=0,則x'=x+e，

y'=bx+dy+f,一樣設b=0,d=1,則y'=y+f。

這就是translate(e,f)了。

因此說translate(e,f)就是簡化了的變換矩陣matrix(1,0,0,1,e,f)，

(x,y)平移(tx,ty)，就意味着作了一個【1 0 0 1 tx,ty】的矩陣變換。

b、矩陣和scale縮放

x'=ax+cy+e，咱們設c=0,e=0,則x'=ax，

y'=bx+dy+f,咱們設b=0,f=0,則y'=dy。

這就是scale(a,d)了。

因此說scale(a,d)就是簡化了的變換矩陣matrix(a,0,0,d,0,0)。

(x,y)縮放（sx,sy），就意味着作了一個【sx 0 0 sy 0 0】的矩陣變換。

c、矩陣和rotate旋轉

rotate(a deg)等價於【cons(a) sin(a) -sin(a) cons(a) 0 0】矩陣變換。

d、矩陣和skew切變

skewX(a deg)等價於【1 0 tan(a) 1 0 0】的矩陣變換。

skewY(a deg)等價於【1 tan(a) 0 1 0 0】的矩陣變換。

因此說Matrix就是將全部的2D效果所有組合在了一塊兒使用。

6、transform-origin

前面說了，元素默認的基點是其中心位置，可用transform-origin改變其基點。

使用：

transform-origin(x,y):用來設置元素的基點（參考點）。默認點是元素的中心點。x，y的值能夠是百分比，em,px，其中x也能夠是left,center,right，y能夠是top,center,bottom，這點和background-position同樣。

 

 

7、資源連接

前端開發中須要用到的變換矩陣

CSS3:transform與transition背後的數學原理[winter]

CSS3 2D Transform

w3c css3-2d-transforms

w3c RotationDefined

w3 文檔，關於座標系以及矩陣變換屬性
w3 文檔，SVG中的3D變換矩陣
w3 文檔，CSS 3中的3D變換矩陣

Transform-style和Perspective屬性

純css旋轉，各類動畫，可做爲加載時動畫【updated 2015,8,4】

http://www.css-spinners.com/

 

本文做者starof,因知識自己在變化，做者也在不斷學習成長，文章內容也不定時更新，爲避免誤導讀者，方便追根溯源，請諸位轉載註明出處：http://www.cnblogs.com/starof/p/4560076.html有問題歡迎與我討論，共同進步。