?1、2d平移：

屬性介紹：（坐標(biāo)原點在左上角，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的方向移動；

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

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

2、2d縮放：屬性scale

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

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

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

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

代碼：

?在div:hover img中寫上transform，在img里transition控制這個動畫屬性，，?

?屬性：transform-origin：center；控制縮放的中心點；

屬性值有：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ù)是正值，則為順時針，為負(fù)值，則為逆時針；transform：rotate（50deg）；=transform：rotateZ（50deg）；二維的旋轉(zhuǎn)其實相當(dāng)于三維里的繞Z軸旋轉(zhuǎn)；

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

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

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

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

代碼：

?結(jié)果：

添加屬性前：

添加屬性后：

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

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平移、缩放、旋转、倾斜、多属性值的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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