下面的**列出了所有的轉換屬性:
屬性描述
csstransform
向元素應用 2d 或 3d 轉換。
3transform-origin
允許你改變被轉換元素的位置。
32d transform 方法
matrix(n,n,n,n,n,n)
定義 2d
轉換,使用六個值的矩陣。
translate(x,y)
定義 2d
轉換,沿著
x 和
y 軸移動元素。
translatex(n)
定義 2d
轉換,沿著
x 軸移動元素。
translatey(n)
定義 2d
轉換,沿著
y 軸移動元素。
scale(x,y)
定義 2d
縮放轉換,改變元素的寬度和高度。
scalex(n)
定義 2d
縮放轉換,改變元素的寬度。
scaley(n)
定義 2d
縮放轉換,改變元素的高度。
rotate(angle)
定義 2d
旋轉,在引數中規定角度。
skew(x-angle,y-angle)
定義 2d
傾斜轉換,沿著
x 和
y 軸。
skewx(angle)
定義 2d
傾斜轉換,沿著
x 軸。
skewy(angle)
定義 2d
傾斜轉換,沿著
y 軸。
CSS3中的變形與動畫
css3常見的動畫效果的實現,其實主要是靠transition和animation。而通常,這兩個又會和css3中的新屬性transform來搭配使用 那麼這三個東西其實是幹什麼用的呢?我按我自己的理解來下個簡單結論。transform 把元素變形 transition 元素的屬性變化時,給他乙個過...
CSS3中的變形與動畫(下)
1 css3 keyframes介紹 keyframes被稱為關鍵幀,其類似於flash中的關鍵幀。在css3中其主要以 keyframes 開頭,後面緊跟著是動畫名稱加上一對花括號 括號中就是一些不同時間段樣式規則。keyframes changecolor 100 在乙個 keyframes 中...
CSS3變形與動畫上
transform rotate 20deg 以自己中心點為旋轉中心,順時針 逆時針 transform skew 45deg 1 skew x,y 使元素在水平和垂直方向同時扭曲 x軸和y軸同時按一定的角度值進行扭曲變形 2 skewx x 僅使元素在水平方向扭曲變形 x軸扭曲變形 3 skewy...