2D轉(zhuǎn)換模塊
- transform:rotate(45deg);_________旋轉(zhuǎn)
- transform:translate(50px,0px);_______平移
- transform:scale(1.5,1);________縮放
如果進行多次轉(zhuǎn)換,中間用空格(不是逗號!)隔開
2D的轉(zhuǎn)換模塊會修改元素的坐標(biāo)系, 所以旋轉(zhuǎn)之后再平移就不是水平平移的
形變中心點
- transform-origin:(可接受像素/百分比/特殊關(guān)鍵詞三種取值)
旋轉(zhuǎn)軸向
- transform:rotateY(45deg);
想圍繞哪個軸旋轉(zhuǎn), 那么只需要在rotate后面加上哪個軸即可
透視
- perspective:500px;__________近大遠小 (要添加到他的父元素上)
一定要注意, 透視屬性必須添加到需要呈現(xiàn)近大遠小效果的元素的父元素上面
盒子陰影和文字陰影
1.如何給盒子添加陰影
box-shadow: 水平偏移 垂直偏移 模糊度 陰影擴展 陰影顏色 內(nèi)外陰影;
2.注意點
2.1盒子的陰影分為內(nèi)外陰影, 默認(rèn)情況下就是外陰影
2.2快速添加陰影只需要編寫三個參數(shù)即可
box-shadow: 水平偏移 垂直偏移 模糊度;
默認(rèn)情況下陰影的顏色和盒子內(nèi)容的顏色一致
3.如何給文字添加陰影
text-shadow: 水平偏移 垂直偏移 模糊度 陰影顏色 ;
