縮放格式 ?transform:scale(1.5,0.5)
如果水平和垂直縮放都一樣,那么可以簡(jiǎn)寫(xiě)為一個(gè)參數(shù)
注意點(diǎn)
1. 如果需要進(jìn)行多個(gè)轉(zhuǎn)換,那么用空格隔開(kāi)
2. 2D的轉(zhuǎn)換模塊會(huì)修改元素的坐標(biāo)系,所以旋轉(zhuǎn)之后再平移就不是水平平移的
形變中心點(diǎn)
默認(rèn)情況下所有的元素都是以自己的中心點(diǎn)作為參考來(lái)旋轉(zhuǎn)的,我們可以通過(guò)形變中心點(diǎn)屬性來(lái)修改他的參考點(diǎn)
取值有三種形式
具體像素;百分比;特殊關(guān)鍵字
格式
transform-origin:200px 100px;
transform-origin:100% 50%;
transform-origin:right center;
旋轉(zhuǎn)軸向
默認(rèn)情況下所有元素都是圍繞Z軸進(jìn)行旋轉(zhuǎn)
想圍繞哪個(gè)軸旋轉(zhuǎn),只需要在rotate后面加上哪個(gè)軸即可
透視
近大遠(yuǎn)小
格式:perspective:500px;
注意點(diǎn)
透視屬性必須添加到需要呈現(xiàn)近大遠(yuǎn)小效果的元素的父元素上面
給盒子添加陰影
box-shadow:水平位移 ?垂直位移 ?模糊度 ?陰影擴(kuò)展 ?陰影顏色 ?內(nèi)外陰影;
注意點(diǎn)
1. 盒子的陰影分為內(nèi)陰影和外陰影,默認(rèn)情況下就是外陰影
2. 快速添加陰影只需要編寫(xiě)三個(gè)參數(shù)即可
box-shadow:水平位移 ?垂直位移 ?模糊度
3. 默認(rèn)情況下陰影的顏色和盒子內(nèi)容的顏色一致
給文字添加陰影
text-shadow:水平位移 ?垂直位移 ?模糊度 ?陰影顏色;