W3Cschool
恭喜您成為首批注冊用戶
獲得88經驗值獎勵
CSS3 2D
transform
transform的屬性包括:rotate() / skew() / scale() / translate(,) ,分別還有x、y之分,比如:rotatex() 和 rotatey()
1、translate()
將元素向指定的方向移動,類似于position中的relative。 水平移動: 向右移動translate(tx,0)和向左移動translate(-tx,0); 垂直移動: 向上移動translate(0,-ty)和向下移動translate(0,ty); 對角移動: 右下角移動translate(tx,ty)、右上角移動translate(tx,-ty)、左上角移動translate(-tx,-ty)和左下角移動translate(-tx,ty)。
translateX(): 水平方向移動一個對象。對像只向X軸進行移動,如果值為正值,對像向右移動;如果值為負值,對像向左移動。 translateY(): 縱軸方向移動一個對象。對象只向Y軸進行移動,如果值為正值,對象向下移動;如果值為負值,對像向上移動。 這兩個函數和前面介紹的translate()函數不同的是每個方法只接受一個值。 所以 transform:translate(-100px,0)實際上等于transform:translateX(-100px); transform:translate(0,-100px)實際上等于transform:translateY(-100px)。
2、scale()
讓元素根據中心原點對對象進行縮放。默認的值1。因此0.01到0.99之間的任何值,使一個元素縮小;而任何大于或等于1.01的值,讓元素顯得更大。 縮放scale()函數和translate()函數的語法非常相似,他可以接受一個值,也可以同時接受兩個值,如果只有一個值時,其第二個值默認與第一個值相等。 例如, scale(1,1)元素不會有任何變化,而scale(2,2)讓元素沿X軸和Y軸放大兩倍。 scaleX():相當于scale(sx,1)。表示元素只在X軸(水平方向)縮放元素,其默認值是1。 scaleY():相當于scale(1,sy)。表示元素只在Y軸(縱橫方向)縮放元素,其默認值是1。
3、rotate()
旋轉rotate()函數通過指定的角度參數對元素根據對象原點指定一個2D旋轉。它主要在二維空間內進行操作,接受一個角度值,用來指定旋轉的幅度。如果這個值為正值,元素相對原點中心順時針旋轉;如果這個值為負值,元素相對原點中心逆時針旋轉。
rotateX() 方法,元素圍繞其 X 軸以給定的度數進行旋轉
rotateY() 方法,元素圍繞其 Y 軸以給定的度數進行旋轉
4、skew()
傾斜skew()函數能夠讓元素傾斜顯示。它可以將一個對象以其中心位置圍繞著X軸和Y軸按照一定的角度傾斜。 一個參數時:表示水平方向的傾斜角度; 兩個參數時:第一個參數表示水平方向的傾斜角度,第二個參數表示垂直方向的傾斜角度
transform-origin
transform-origin是變形原點,也就是該元素圍繞著那個點變形或旋轉,該屬性只有在設置了transform屬性的時候起作用;
因為我們元素默認基點就是其中心位置,換句話說我們沒有使用transform-origin改變元素基點位置的情況下,transform進行的rotate,translate,scale,skew等操作都是以元素自己中心位置進行變化的。
2D 轉換元素能夠改變元素 x 和 y 軸
Copyright©2021 w3cschool編程獅|閩ICP備15016281號-3|閩公網安備35020302033924號
違法和不良信息舉報電話:173-0602-2364|舉報郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號
聯系方式:
更多建議: