CSS-2D轉(zhuǎn)換模塊

縮放格式 ?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:水平位移 ?垂直位移 ?模糊度 ?陰影顏色;

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 選擇qi:是表達(dá)式 標(biāo)簽選擇器 類(lèi)選擇器 屬性選擇器 繼承屬性: color,font,text-align,li...
    love2013閱讀 2,437評(píng)論 0 11
  • 選擇qi:是表達(dá)式 標(biāo)簽選擇器 類(lèi)選擇器 屬性選擇器 繼承屬性: color,font,text-align,li...
    wzhiq896閱讀 2,119評(píng)論 0 2
  • 1、屬性選擇器:id選擇器 # 通過(guò)id 來(lái)選擇類(lèi)名選擇器 . 通過(guò)類(lèi)名來(lái)選擇屬性選擇器 ...
    Yuann閱讀 1,752評(píng)論 0 7
  • 關(guān)于css3變形 CSS3變形是一些效果的集合,比如平移、旋轉(zhuǎn)、縮放和傾斜效果,每個(gè)效果都被稱(chēng)作為變形函數(shù)(Tra...
    hopevow閱讀 6,567評(píng)論 2 13
  • 如果一個(gè)人可以回到過(guò)去的某一個(gè)時(shí)光,你會(huì)選擇回到什么時(shí)候呢? 也許有人會(huì)選擇回到牙牙學(xué)語(yǔ)的時(shí)候;有人會(huì)選...
    在路上的南方姑娘閱讀 569評(píng)論 0 1

友情鏈接更多精彩內(nèi)容