?1、2d平移：

屬性介紹：（坐標(biāo)原點(diǎn)在左上角，x軸的正值是往右，y軸的正值是往下）

（1）transform：translateX（100px/-100px）;在x軸上往右平移100px，或者在x軸上往左平移100px；

（2）transform：translateY（100px/-100px）;在y軸上往下平移100px，或者在y軸上往上平移100px；

（3）transform：translate（100px，100px）；往x軸100px，y軸100px的方向移動(dòng)；

transform：translate屬性寫在hover里面，當(dāng)鼠標(biāo)放上去才有這個(gè)屬性，而transition屬性寫在div身上，控制動(dòng)畫(huà)效果；transform：translate只是規(guī)定往哪個(gè)方向移動(dòng)，而最終的效果還是要transition控制。代碼如下圖：

注意：還有一種寫法就是：百分比的寫法：transform：translateX（100%）；這個(gè)100%是相對(duì)于自身的100%，也就是向X軸移動(dòng)自身的寬度距離。這個(gè)百分比很好用。

2、2d縮放：屬性scale

?屬性介紹：scale（1）默認(rèn)參數(shù)是1，比1大就擴(kuò)大，比1小就縮小，中心點(diǎn)是圖形或者盒子本身的中心點(diǎn)

（1）transform：scale（1.5）；在原基礎(chǔ)上以中心點(diǎn)為參考點(diǎn)進(jìn)行擴(kuò)大；

（2）transform：scaleX（1.5）;在原基礎(chǔ)上以中心點(diǎn)為參考點(diǎn)在橫向上擴(kuò)大；

（3）transform：scaleY（1.5）;在原基礎(chǔ)上以中心點(diǎn)為參考點(diǎn)在縱向上擴(kuò)大；

代碼：

?在div:hover img中寫上transform，在img里transition控制這個(gè)動(dòng)畫(huà)屬性，，?

?屬性：transform-origin：center；控制縮放的中心點(diǎn)；

屬性值有：center、left top、left bottom、left center、right?top、right?bottom、right?center；默認(rèn)值是center

3、2d旋轉(zhuǎn)?：transform：rotate（50deg）

?屬性介紹：

（1）transform：rotate（50deg）；繞物體中心旋轉(zhuǎn)；參數(shù)是正值，則為順時(shí)針，為負(fù)值，則為逆時(shí)針；transform：rotate（50deg）；=transform：rotateZ（50deg）；二維的旋轉(zhuǎn)其實(shí)相當(dāng)于三維里的繞Z軸旋轉(zhuǎn)；

（2）transformX：rotate（50deg）；繞x軸（橫軸）前后旋轉(zhuǎn)，x軸穿過(guò)物體的中心點(diǎn)，在直徑上，三維旋轉(zhuǎn)；

（3）transformY：rotate（50deg）；繞y軸（橫軸）左右旋轉(zhuǎn)，y軸穿過(guò)物體的中心點(diǎn)，在直徑上，三維旋轉(zhuǎn)；

4. 平移、縮放、旋轉(zhuǎn)一起用的注意事項(xiàng)：

實(shí)驗(yàn)：我們讓第一個(gè)盒子只平移；讓第二個(gè)盒子先平移后旋轉(zhuǎn)；讓第三個(gè)盒子先旋轉(zhuǎn)后平移；

代碼：

?結(jié)果：

添加屬性前：

添加屬性后：

?結(jié)果總結(jié)：通過(guò)上面的實(shí)驗(yàn)可以看出來(lái)，先平移后旋轉(zhuǎn)和先旋轉(zhuǎn)后平移的結(jié)果是不一樣的，是因?yàn)樾D(zhuǎn)的x軸不一定是橫軸（水平方向上的），x軸是相對(duì)物體來(lái)講的，剛開(kāi)始是水平方向上的，旋轉(zhuǎn)以后，x軸也跟著旋轉(zhuǎn)了，然后再在X軸位移，也就是圖中第三個(gè)盒子是往斜的方向位移，如下圖所示：

5.? 2d傾斜：transform：skew（）

屬性介紹：屬性值可正可負(fù)、正值的話是從右下角拽，負(fù)值是從左下角拽

（1）transform：skew（）；正值，從右下角往右下拽，與Y軸，x軸形成的角度；負(fù)值，從左下角往左下拽，與y軸，x軸形成的角度；

（2）transform：skewX（）；正值，從右下角往右拽，與Y軸形成的角度；負(fù)值，從左下角往左拽，與y軸形成的角度；

（3）transform：skewY（）；正值，從右下角往下拽，與x軸形成的角度；負(fù)值，從左下角往下拽，與x軸形成的角度；

總結(jié)

以上是生活随笔為你收集整理的2d平移、缩放、旋转、倾斜、多属性值的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。