2D轉換模塊

2D轉換模塊（transform）

1.取值：rotate（45deg）--- 旋轉，默認以本身爲中心做爲參考點來旋轉 、translate（100px，0px）--- 平移，第一個參數表明水平方向，第二個是垂直方向、scale（1.5，1.5）--- 縮放，第一個參數表明水平方向，第二個是垂直方向，1表明正常，大於1表明放大，小於1表明縮小，若是兩個值同樣，能夠縮寫成scale（1.5）。
2.連寫格式：transform：rotate（45deg）translate（100px，0px）scale（1.5）；
注意點：若是須要進行多個轉換，那麼用空格隔開、2D的轉換模塊會修改元素的座標系，因此旋轉以後再平移就不是水平平移了。

形變中心點

旋轉軸向

1.默認狀況是以Z軸進行旋轉
2.先圍繞哪一個軸進行旋轉，那麼只須要在rotate後面加上哪一個軸便可。好比：rotateX、rotateY、rotateZ。

透視屬性（perspective:100px）

1.什麼是透視？近大遠小。
2.注意點：必定要注意，透視屬性必須添加到須要呈現近大遠小效果元素的父元素上面。

盒子陰影和文字陰影

1.如何給盒子添加陰影？
格式：box-shadow：水平偏移 垂直偏移 模糊度 陰影擴展 陰影顏色 內外陰影；
注意點：盒子的陰影分爲內外陰影，默認狀況下就是外陰影，因此使用的時候可省略不寫、快速添加陰影只須要編寫前三個屬性便可、默認狀況陰影的顏色和盒子內容的顏色一致。
2.如何給文字添加陰影？
格式：text-shadow：水平偏移 垂直偏移 模糊度 陰影顏色 ；
注意點：默認狀況陰影的顏色和文字的顏色一致。

來自爲知筆記(Wiz)