正常的 旋轉(zhuǎn)的transform:rotate(45deg);? deg單位代表多少度
平移的transform:translate(100px,0px);? (水平方向移動笑陈,垂直方向移動)
縮放的transform:scale(1.5,1);? (水平方向移動葵袭,垂直方向移動)
如果水平和垂直都一樣可以簡寫為? ? transform:scale(1.5);
綜合的 transform:rotate(45deg) translate(100px,0px) scale(1.5);
注意點:1、如果需要進行多個轉(zhuǎn)換坡锡,那么用空格隔開
2、2D的轉(zhuǎn)換模塊會修改元素的坐標(biāo)系帆锋,所以旋轉(zhuǎn)之后再平移就不是水平平移的
形變中心點
transform-origin: 水平方向 垂直方向禽额;
取值有: 像素? 百分比? 特殊關(guān)鍵字(left/center/right? top/center/bottom)
默認(rèn)情況下所有元素都是以自己的中心點作為參考來旋轉(zhuǎn)的, 我們可以通過形變中心點屬性來修改它的參考點
旋轉(zhuǎn)軸向
想圍繞哪個軸旋轉(zhuǎn),那么只需要在rotate后面加上哪個軸即可实辑。
transform:rotateZ();? 默認(rèn)的
transform:rotateX();
transform:rotateY();
過場動畫和過渡動畫區(qū)別
透視屬性 近大遠小
perspective:500px;? 后面的這個像素 是指距離這個物理的距離
注意點:透視屬性必須添加到需要呈現(xiàn)近大遠小效果的元素的父元素上面
盒子陰影和文字陰影
盒子的陰影
box-shadow:水平偏移 垂直偏移 模糊度 陰影擴展 陰影顏色 內(nèi)外陰影;
注意點1徙菠、盒子的陰影分為內(nèi)外陰影,默認(rèn)情況下就是外陰影
2缺狠、快速添加陰影只需要編寫三個參數(shù)即可
box-shadow:水平偏移 垂直偏移 模糊度萍摊;
默認(rèn)情況下陰影的顏色和盒子內(nèi)容的顏色一致
文字的陰影
如何給文字添加陰影
text-shadow:水平偏移 垂直偏移 模糊度 陰影顏色;
注意點:快速添加陰影只需要編寫三個參數(shù)即可
text-shadow:水平偏移 垂直偏移 模糊度冰木;
默認(rèn)情況下陰影的顏色和文字的顏色一致
翻轉(zhuǎn)的菜單
ul>li{菜單名}*5
/*設(shè)置透明度 0透明? 1不透明*/
opacity:0;
定位的元素會覆蓋沒有定位的元素