2D轉(zhuǎn)換模塊
- 格式：transform：值；
- 取值：
- transform: rotate(45deg);（順時針旋轉(zhuǎn)45度,deg是單位代表多少度）
- transform: translate(100px, 0px)（平移。第一個參數(shù):水平方向， 第二個參數(shù):垂直方向）
- transform: scale(1,0.5);（縮放。第一個參數(shù):水平方向,第二個參數(shù):垂直方向）
- 注意：
- transform: scale（1.5）
如果取值是1, 代表不變倦春。如果取值大于1, 代表需要放大。如果取值小于1, 代表需要縮小。如果水平和垂直縮放都一樣, 那么可以簡寫為一個參數(shù)飘蚯。 - transform: rotate(45deg) translate(100px, 0px) scale(1.5, 1.5);
如果需要進(jìn)行多個轉(zhuǎn)換, 那么用空格隔開馍迄。
2D的轉(zhuǎn)換模塊會修改元素的坐標(biāo)系, 所以旋轉(zhuǎn)之后再平移就不是水平平移的
形變中心點(diǎn)
- 默認(rèn)情況下所有的元素都是以自己的中心點(diǎn)作為參考來旋轉(zhuǎn)的, 我們可以通過形變中心點(diǎn)屬性來修改它的參考點(diǎn)
- 格式：
- transform-origin: left top;（第一個參數(shù):水平方向，第二個參數(shù):垂直方向）
- 注意：
- 取值有三種形式：
- 具體像素
- 百分比
- 特殊關(guān)鍵詞
- 事例：
形變中心點(diǎn)沒有改變時
形變中心點(diǎn)改變成transform-origin: left top;時
旋轉(zhuǎn)軸向
- 默認(rèn)情況下所有元素都是圍繞Z軸進(jìn)行旋轉(zhuǎn)transform: rotateZ(45deg);
-
如圖
- transform: rotateX(45deg);添加X就是圍繞坐標(biāo)X軸進(jìn)行旋轉(zhuǎn)
-
如圖
- transform: rotateY(45deg);添加Y就是圍繞坐標(biāo)Y軸進(jìn)行旋轉(zhuǎn)
- 如圖
- 總結(jié): 想圍繞哪個軸旋轉(zhuǎn), 那么只需要在rotate后面加上哪個軸即可
- perspective: 500px;（透視屬性）
- 進(jìn)行X或Y軸旋轉(zhuǎn)時加上的屬性局骤。
- 什么是透視：近大遠(yuǎn)小
- 注意：一定要注意, 透視屬性必須添加到需要呈現(xiàn)近大遠(yuǎn)小效果的元素的父元素上面
盒子陰影和文字陰影
- 如何給盒子添加陰影：
- box-shadow: 水平偏移（數(shù)值） 垂直偏移（數(shù)值） 模糊度（數(shù)值） 陰影擴(kuò)展（數(shù)值） 陰影顏色 內(nèi)外陰影（默認(rèn)外陰影攀圈，inset內(nèi)陰影）;
- 注意：
- 盒子的陰影分為內(nèi)外陰影, 默認(rèn)情況下就是外陰影
- 快速添加陰影只需要編寫三個參數(shù)即可
box-shadow: 水平偏移 垂直偏移 模糊度; - 默認(rèn)情況下陰影的顏色和盒子內(nèi)容的顏色一致
- 如何給文字添加陰影
- text-shadow: 水平偏移 垂直偏移 模糊度 陰影顏色 ;
設(shè)置透明度
- 格式：opacity: 0;
- 注意：取值0是透明，取值1是不透明峦甩，取值0到1之間是半透明赘来。
