Transform使用詳解

在react native開發中，我們可以通過transform的設定來實現元件（包括文字，影象）的變形。

1. 平移（translate）

translatex:沿x軸方向平移

translatey: 沿y軸方向平移

例如：

class main extends component } 
const styles = stylesheet.create(,
t1: ]
},t2: ]
}});

2.縮放scalex: 沿x軸方向放大

scaley: 沿y軸方向放大

scale: 沿x,y軸方向放大

例如：

class main extends component } 
const styles = stylesheet.create(,
t1: ]
},t2: ]
},t3: ]
}});

3. 旋轉rotatex: 沿x軸旋轉

rotatey：沿y軸旋轉

rotatez: 沿z軸旋轉

rotate: 不指定軸旋轉

class main extends component } 
const styles = stylesheet.create(,
t1: ]
},t2: ]
},t3: ]
},t4: ]
}});

4. 傾斜（旋轉和傾斜的區別：rotate控制目標整體旋轉，與目標內部形狀無關，目標內部不發生任何形變 skew目標內部的形狀會隨傾斜而改變）skewx: 沿x軸方向傾斜

skewy: 沿y軸方向傾斜

class main extends component } 
const styles = stylesheet.create(,
t1: ]
},t2: ]
}});

在實際的使用中，可以同時疊加使用多種形變效果。

transform: [, ] //x,y軸都放大並且y軸傾斜

語法 transform none 取值指定乙個身份轉變說明應用於block水平和inline水平的元素。transform可以對元素進行角度旋轉和縮放,請使用webkit核心最新版瀏覽器瀏覽該文章以保證css3效果能夠完全呈現在設定了transform屬性後，可以設定transform o...

2010 09 18 16 06 33 分類 html5 css3 字型大小訂閱語法 transform none 取值指定乙個身份轉變說明應用於block水平和inline水平的元素。transform可以對元素進行角度旋轉和縮放,請使用webkit核心最新版瀏覽器瀏覽該文章以保證css...