transform轉(zhuǎn)換

• transform與transition一樣炊昆，默認(rèn)都是:如果你以觸發(fā)事件的方式來(lái)設(shè)置transform轉(zhuǎn)換，那么默認(rèn)觸發(fā)結(jié)束后會(huì)還原樣式值(3D是直接設(shè)置也會(huì)還原)
• 如果想讓轉(zhuǎn)換完之后威根，保留效果不還原凤巨，需要在父元素中設(shè)置transform-style:flat||preserve-3d。它的作用是讓該元素的子元素轉(zhuǎn)換后保留效果洛搀，flat是默認(rèn)值不保留效果敢茁，preserve-3d是保留3D效果

2D轉(zhuǎn)換

• 2D移動(dòng)
  • transform:translate(x,y)使元素參照元素自身的左上角作X軸和Y軸的移動(dòng)，寫(xiě)一個(gè)值默認(rèn)是設(shè)置X軸
  • 如果你只想設(shè)置一個(gè)方向移動(dòng)，那么將另一個(gè)值設(shè)置為0，或者直接寫(xiě)translateX瓷叫、translateY都行
  • 如果translate中傳入百分比，那么參照的值是自身的寬高逢倍，所以translate(-50%,-50%)配合定位的邊偏移值也能實(shí)現(xiàn)水平垂直居中
• 2D縮放
  • transform:scale(x,y)使元素參照自身幾何中心(就是元素的正中心)進(jìn)行縮放，值>1.01表示放大棺榔，值<0.99表示縮小瓶堕，注意元素縮放不會(huì)影響其他元素的正常布局
  • 如果寫(xiě)一個(gè)值默認(rèn)是x軸和y軸同比例縮放，想單個(gè)設(shè)置可以用scaleX和scaleY
• 2D旋轉(zhuǎn)
  • transform:rotate(xx角度)使元素參照對(duì)象原點(diǎn)症歇，做2D旋轉(zhuǎn)
  • 如果值是正值那么順時(shí)針旋轉(zhuǎn)郎笆，是負(fù)值逆時(shí)針旋轉(zhuǎn)。2d旋轉(zhuǎn)實(shí)際上就是參照Z(yǔ)軸做旋轉(zhuǎn)忘晤。另外旋轉(zhuǎn)會(huì)將坐標(biāo)軸也旋轉(zhuǎn)宛蚓，所以一定不要先旋轉(zhuǎn)再移動(dòng)
• 設(shè)置旋轉(zhuǎn)軸心點(diǎn)
  • transform-origin(坐標(biāo)或者方位詞)元素旋轉(zhuǎn)默認(rèn)是參照正中心點(diǎn)，使用這個(gè)方法可以修改元素旋轉(zhuǎn)參照的對(duì)象原點(diǎn)
  • 參數(shù)可以寫(xiě)坐標(biāo)值设塔，也可以寫(xiě)方位詞
• 2D斜切
  • transform:skew(x角度凄吏，y角度)使元素參照對(duì)象原點(diǎn)，做2D傾斜闰蛔。如果角度值是正值往逆時(shí)針傾斜痕钢，如果角度值是負(fù)值往順時(shí)針傾斜。設(shè)置兩個(gè)值會(huì)先X軸傾斜序六，再Y軸傾斜
  • 如果想單個(gè)設(shè)置可以用skewX和skewY
  • 注意斜切和旋轉(zhuǎn)不一樣任连，旋轉(zhuǎn)只是轉(zhuǎn)變角度不改變?cè)匦螤睿切鼻兄皇歉淖冊(cè)匦螤畈恍D(zhuǎn)例诀。斜切實(shí)際工作中用得較少
• 為某個(gè)元素同時(shí)添加多個(gè)transform屬性随抠，直接連寫(xiě)用空格分隔

3D轉(zhuǎn)換

• 3D實(shí)際上就是在2D的基礎(chǔ)上多加了一條Z軸裁着，Z軸是與屏幕垂直的。通過(guò)水平X軸拱她、垂直Y軸二驰、與屏幕垂直的Z軸，就組成了三維里立體的空間
• 3D移動(dòng)
  • transform:translate3d(x,y,z)讓元素以3D的方式來(lái)移動(dòng)秉沼，注意這樣寫(xiě)3個(gè)參數(shù)必須寫(xiě)全
  • 如果你不想設(shè)置兩條軸的值桶雀，可以寫(xiě)0，或者分別寫(xiě)translateX氧猬、translateY背犯、translateZ
• 3D縮放
  • transform:scale3d(x,y,z)讓元素以3D的方式來(lái)縮放，注意這樣寫(xiě)3個(gè)參數(shù)必須寫(xiě)全
  • 如果你不想設(shè)置兩條軸的值盅抚，可以寫(xiě)0，或者分別寫(xiě)scaleX倔矾、scaleY妄均、scaleZ
• 3D旋轉(zhuǎn)(難點(diǎn))
  • transform:rotate3d(x,y,z,角度值)讓元素以3D的方式來(lái)旋轉(zhuǎn)
  • 如果只想單獨(dú)參照某條軸作旋轉(zhuǎn)，也可以寫(xiě)rotateY(角度)哪自、rotateX(角度)丰包、rotateZ(角度)
  • 以下是對(duì)前三個(gè)參數(shù)的詳解：
    • x，y壤巷，z實(shí)際上三條軸上的向量值邑彪，什么是向量值呢？相當(dāng)于在軸上拉出設(shè)置值距離的線胧华，然后讓元素的旋轉(zhuǎn)軸心跟這條線方向一樣來(lái)進(jìn)行旋轉(zhuǎn)寄症，一般要設(shè)置值都是1
    • 例如：設(shè)置x軸y軸相同的向量值，那么實(shí)際上產(chǎn)生的是一條平面的對(duì)角線矩动。設(shè)置三條軸相同的向量值有巧，那么產(chǎn)生的是一條立方體的對(duì)角線
    • 向量值的大小在當(dāng)前軸沒(méi)有任何影響，但如果多條軸的大小不一樣悲没，那么會(huì)改變軸心線的角度
    • 三維的東西通過(guò)文字很難描述和理解篮迎，建議通過(guò)案例圖形來(lái)幫助理解
    • 左手法則：大拇指指向當(dāng)前坐標(biāo)軸的往后延伸的方向 ，手指環(huán)繞的方向就是正方向

景深透視

• perspective:xxp為元素添加一個(gè)景深透視距離示姿，默認(rèn)是0沒(méi)有效果甜橱。它的默認(rèn)透視角度實(shí)在Z軸等于0的那一面位置。如果設(shè)置的值小于你的立方體各條變寬度栈戳，就相當(dāng)于在立方體內(nèi)部觀察整個(gè)盒子岂傲。如果大于或等于就相當(dāng)于在外部看到盒子
• perspective-origin:x,y以鏡頭的角度來(lái)觀察立方體，默認(rèn)是在立方體的最中心點(diǎn)荧琼，通過(guò)設(shè)置x和y的值來(lái)調(diào)整鏡頭角度
• 這兩個(gè)屬性一般用得很少譬胎，了解即可

動(dòng)畫(huà)

• css3中自帶了動(dòng)畫(huà)功能差牛，也叫關(guān)鍵幀動(dòng)畫(huà)。動(dòng)畫(huà)本質(zhì)上與過(guò)渡沒(méi)有區(qū)別都是讓某個(gè)元素移動(dòng)的位置的時(shí)候堰乔，以動(dòng)畫(huà)的方式
• 但是過(guò)渡只能設(shè)置開(kāi)始關(guān)鍵幀和結(jié)束關(guān)鍵幀偏化，動(dòng)畫(huà)卻可以通過(guò)關(guān)鍵字@keyframes以耗時(shí)百分比的形式來(lái)設(shè)置多個(gè)關(guān)鍵幀，實(shí)現(xiàn)多段動(dòng)畫(huà)移動(dòng)的效果
• animation-name:設(shè)置好的動(dòng)畫(huà)名字在css3里動(dòng)畫(huà)不是直接設(shè)置镐侯，而是在外面通過(guò)關(guān)鍵字設(shè)置好侦讨，然后通過(guò)這個(gè)屬性調(diào)用動(dòng)畫(huà)
• animation-duration:xxs動(dòng)畫(huà)耗時(shí)
• animation-iteration-count:x設(shè)置動(dòng)畫(huà)重復(fù)執(zhí)行次數(shù)，如果設(shè)置infinite就是無(wú)限重復(fù)執(zhí)行
• animation-deraction:alternate設(shè)置動(dòng)畫(huà)交替播放苟翻，即執(zhí)行完一次后韵卤，終點(diǎn)和初始點(diǎn)互換再執(zhí)行，然后這樣反復(fù)交替執(zhí)行
• animation-delay:xs設(shè)置動(dòng)畫(huà)延遲多少秒再執(zhí)行
• animation-fill-mode設(shè)置動(dòng)畫(huà)結(jié)束時(shí)的狀態(tài)崇猫，動(dòng)畫(huà)默認(rèn)執(zhí)行完也會(huì)還原沈条，三個(gè)屬性介紹：
  • forwards動(dòng)畫(huà)結(jié)束后保留其位置
  • backwards動(dòng)畫(huà)結(jié)束后不保留位置，但是如果該動(dòng)畫(huà)同時(shí)設(shè)置了延時(shí)以及初始樣式诅炉，那么該屬性會(huì)讓元素立即進(jìn)入初始樣式
  • both綜合了上面兩個(gè)的特點(diǎn)蜡歹，即會(huì)保留位置，設(shè)置了延時(shí)和初始樣式也會(huì)立刻進(jìn)入
• animation-timing-function:linear||ease||steps與過(guò)渡一樣涕烧，設(shè)置動(dòng)畫(huà)執(zhí)行的效果月而，勻速還是先快后慢還是一步一步執(zhí)行
• animation-play-state:running||paused設(shè)置動(dòng)畫(huà)的播放和暫停，一般配合js來(lái)使用
• 時(shí)鐘案例運(yùn)用知識(shí)點(diǎn)較多议纯，需要多理解透徹

web字體和字體圖標(biāo)

• web字體
  • 在以前想要在頁(yè)面上使用特殊字體父款，并顯示到網(wǎng)頁(yè)上必須用戶設(shè)備上有對(duì)應(yīng)字體才可以。現(xiàn)在css3新增了webfont功能瞻凤，可以在頁(yè)面上顯示任意特殊字體憨攒，而跟用戶設(shè)備沒(méi)有關(guān)系
  • 使用方法很簡(jiǎn)單
    • 到相關(guān)web字體網(wǎng)站上生成你想展示的特殊字體，并下載
    • 在代碼中使用@font-face關(guān)鍵字聲明定義特殊字體
    • 定義特殊字體樣式
    • 調(diào)用特殊字體樣式
  • 注意：web字體的生效只限于你生成的那幾個(gè)字鲫构，并不是所有字體都能使用該樣式浓恶，所以生成和使用時(shí)都要明白哪些字需要使用特殊字體
• 字體圖標(biāo)
  • 字體圖標(biāo)本質(zhì)上就是字體，不過(guò)是以圖標(biāo)的形式展示结笨，因是矢量字體包晰，所以字體圖標(biāo)可以任意設(shè)置大小顏色，不會(huì)像圖片那樣失幀
  • 使用方法與web字體有點(diǎn)相似炕吸，都是從相關(guān)網(wǎng)站上下載對(duì)應(yīng)字體圖標(biāo)伐憾，并通過(guò)關(guān)鍵字聲明字體，再定義樣式并調(diào)用
  • 但是要注意：因?yàn)樽煮w圖標(biāo)是Unicode編碼的形式赫模，不方便閱讀树肃。所以最常見(jiàn)的使用方式是通過(guò)偽元素的方式來(lái)實(shí)現(xiàn)。定義一個(gè)與字體圖標(biāo)意義相關(guān)的類(lèi)名瀑罗，讓該類(lèi)名以偽元素的形式加入字體圖標(biāo)胸嘴，再調(diào)用該類(lèi)名即可雏掠。
  • 偽元素里content屬性寫(xiě)unicode編碼的時(shí)候，用\反斜杠來(lái)代替&#x
• web字體和字體圖標(biāo)在實(shí)際工作中都是很常用的劣像，要記住怎么用乡话。iconfont是個(gè)很不錯(cuò)的生成網(wǎng)站

多列布局

• 隨著現(xiàn)在屏幕越來(lái)越大，寬度已經(jīng)延伸了非常多耳奕。如果還像以前那樣一行到底的顯示文字绑青，用戶可能看兩三行就視覺(jué)疲勞不看了。也因此屋群，css3新增的多列布局屬性闸婴，通過(guò)設(shè)置讓本來(lái)通行的文字，分成幾列來(lái)排列
• column-count:x該值為數(shù)值芍躏，當(dāng)你為一段長(zhǎng)文本設(shè)置此屬性時(shí)邪乍，數(shù)值是幾就分成幾列，寬度平均分配
• column-ruler: 粗細(xì) 線類(lèi)型 顏色設(shè)置每列間隙的樣式纸肉，書(shū)寫(xiě)方式和邊框一模一樣
• column-gap:xxpx設(shè)置每列間距大小
• column-width:xxpx設(shè)置每列寬度溺欧，如果同時(shí)設(shè)置了列數(shù)和寬度，那么它會(huì)取大優(yōu)先柏肪。就是說(shuō)如果設(shè)置的寬度比平均分配的寬度大，那么應(yīng)用這個(gè)樣式芥牌。反之烦味，應(yīng)用列數(shù)樣式。還有一點(diǎn)：分列之后壁拉，會(huì)自動(dòng)填滿整個(gè)屏幕谬俄，所以也可能出現(xiàn)實(shí)際寬度比你設(shè)置寬度大的情況
• column-span:1||all設(shè)置跨列顯示，要么只顯示在一列弃理，要么橫跨所有列