css3中變形與動畫（一）

本文轉載自查看原文 2015-07-22 21:29 16108 html5+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>)

一、旋轉rotate

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

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

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

二、translate平移

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

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

translate()分三種情況：

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

Note:translate移動的基點默認為元素中心點，可以根據transform-origin改變基點。

如果第二個值沒設置，默認為0。

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

相當於translate(x,0,)的簡寫，基點為元素中心點。

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

相當於translate(0,y)的簡寫，基點為元素在中心。

三、scale縮放

scale縮放和translate移動非常相似，也有三種情況。

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

基數：縮放就是既可以縮小，也可以放大；縮放基數為1，大於1放大，小於1縮小。

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

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

2、scaleX(x)x軸縮放。

3、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

四、skew切變

這個屬性是用來制作傾斜度的,設計時在2d里面創建3d透視圖的時候必須的屬性。

skew和translate、scale一樣有三種情況。

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

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

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

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

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

五、矩陣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中都有矩陣變換，接下來簡單說說。

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