成人免费视频网址_欧美性xxxxxxxxx_最近2019年中文视频免费在线观看_国产精品久久久久久久久久久久久_国产精品成人免费视频_中文字幕在线成人_精品中文字幕在线_欧美午夜视频一区二区_成人观看高清在线观看免费_日韩在线资源网_欧美在线国产精品_国产成人97精品免费看片_久久久成人精品视频_欧美日韩国产精品一区_国产一区二区三区久久精品_97视频在线观看免费

　　隨著互聯網的普及和技術的不斷發展，web前端開發工程師在當今互聯網行業中的重要地位，Web前端開發工程師作為一個專業技術崗位，需要掌握多種技術來構建現代化的網頁和應用程序，今天八維職業學校和大家一起來看看web前端開發工程師如何使用CSS3實現2D變換？希望對想要學習和了解web前端開發工程師這個行業的同學有所幫助。

　　CSS2D transform 表示2D變換，目前獲得了各主流瀏覽器的支持，是CSS3中具有強大的特征之一，可以實現元素的位移、旋轉、傾斜、縮放，甚至支持矩陣方式，可以取代大量之前只能靠Flash才可以實現的效果。

　　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旋轉。它主要在二維空間內進行操作，接受一個角度值，用來指定旋轉的幅度。如果這個值為正值，元素相對原點中心順時針旋轉;如果這個值為負值，元素相對原點中心逆時針旋轉。單位deg。

　　rotate()方法， 元素旋轉角度

　　rotateX() 方法，元素圍繞其 X 軸以給定的度數進行旋轉

　　rotateY() 方法，元素圍繞其 Y 軸以給定的度數進行旋轉

　　4、skew()

　　傾斜skew()函數能夠讓元素傾斜顯示。它可以將一個對象以其中心位置圍繞著X軸和Y軸按照一定的角度傾斜。單位deg。

　　skew()

　　skewX()

　　skewY()

　　一個參數時：表示水平方向的傾斜角度;

　　兩個參數時：第一個參數表示水平方向的傾斜角度，第二個參數表示垂直方向的傾斜角度

　　transform-origin

　　transform-origin是變形原點，也就是該元素圍繞著那個點變形或旋轉，該屬性只有在設置了transform屬性的時候起作用;

　　因為我們元素默認基點就是其中心位置，換句話說我們沒有使用transform-origin改變元素基點位置的情況下，transform進行的rotate,translate,scale,skew等操作都是以元素自己中心位置進行變化的。

上一篇：Python編程語言的優缺點是什么呢?

下一篇：web前端開發工程師常見的TypeScript中使用的基本類型