自定義變形 transform-origin首先，任何一個(gè)元素都有一個(gè)中心點(diǎn)，默認(rèn)情況之下，其中心點(diǎn)是居于元素X軸和Y軸的50%處我們所學(xué)的2D變形都是以元素自己中心位置進(jìn)行變形通過(guò)transform-origin屬性來(lái)改變?cè)氐闹行狞c(diǎn)transform-origin取值 1：方位 2：百分比變形--旋轉(zhuǎn)rotate()旋轉(zhuǎn)rotate()函數(shù)通過(guò)指定的角度參數(shù)使元素相對(duì)原點(diǎn)進(jìn)行旋轉(zhuǎn)。它主要在二維空間內(nèi)進(jìn)行操作，設(shè)置一個(gè)角度值，用來(lái)指定旋轉(zhuǎn)的幅度。如果這個(gè)值為正值，元素相對(duì)原點(diǎn)中心順時(shí)針旋轉(zhuǎn)；如果這個(gè)值為負(fù)值，元素相對(duì)原點(diǎn)中心逆時(shí)針旋轉(zhuǎn)。變形--扭曲skew()扭曲skew()函數(shù)能夠讓元素傾斜顯示。它可以將一個(gè)對(duì)象以其中心位置圍繞著X軸和Y軸按照一定的角度傾斜。這與rotate()函數(shù)的旋轉(zhuǎn)不同，rotate()函數(shù)只是旋轉(zhuǎn)，而不會(huì)改變?cè)氐男螤睢kew()函數(shù)不會(huì)旋轉(zhuǎn)，而只會(huì)改變?cè)氐男螤睢kew()具有三種情況：1、skew(x,y)使元素在水平和垂直方向同時(shí)扭曲（X軸和Y軸同時(shí)按一定的角度值進(jìn)行扭曲變形）；第一個(gè)參數(shù)對(duì)應(yīng)X軸，第二個(gè)參數(shù)對(duì)應(yīng)Y軸。如果第二個(gè)參數(shù)未提供，則值為0，也就是Y軸方向上無(wú)斜切。2、skewX(x)僅使元素在水平方向扭曲變形（X軸扭曲變形）；3、skewY(y)僅使元素在垂直方向扭曲變形（Y軸扭曲變形）變形--縮放scale()縮放scale()函數(shù)

讓元素根據(jù)中心原點(diǎn)對(duì)對(duì)象進(jìn)行縮放。縮放scale具有三種情況：1、

scale(X,Y)使元素水平方向和垂直方向同時(shí)縮放（也就是X軸和Y軸同時(shí)縮放）注意：Y是一個(gè)可選參數(shù)，如果沒(méi)有設(shè)置Y值，則表示X，Y兩個(gè)方向的縮放倍數(shù)是一樣的。2、scaleX(x)元素僅水平方向縮放（X軸縮放）3、scaleY(y)元素僅垂直方向縮放（Y軸縮放）變形--位移translate()translate()函數(shù)可以將元素向指定的方向移動(dòng)，類似于position中的relative。或以簡(jiǎn)單的理解為，使用translate()函數(shù)，可以把元素從原來(lái)的位置移動(dòng)，而不影響在X、Y軸上的任何Web組件。translate我們分為三種情況：1、translate(x,y)水平方向和垂直方向同時(shí)移動(dòng)（也就是X軸和Y軸同時(shí)移動(dòng)）2、translateX(x)僅水平方向移動(dòng)（X軸移動(dòng)）3、translateY(Y)僅垂直方向移動(dòng)（Y軸移動(dòng)）二、動(dòng)畫過(guò)度效果transition屬性(1)定義：可以通過(guò)一些簡(jiǎn)單的CSS事件來(lái)觸發(fā)元素的外觀變化，讓效果顯得更加細(xì)膩。簡(jiǎn)單點(diǎn)說(shuō)，就是通過(guò)鼠標(biāo)的單擊、獲得焦點(diǎn)，被點(diǎn)擊或?qū)υ厝魏胃淖冎杏|發(fā)，并平滑地以動(dòng)畫效果改變CSS的屬性值。使用方法：transition：transition-property(過(guò)度屬性)transition-duration(過(guò)度時(shí)間)transition-timing-function(過(guò)渡效果或過(guò)度函數(shù))transition-delay(過(guò)度延遲時(shí)間);transition-property(過(guò)度屬性):transition-property用來(lái)指定過(guò)渡動(dòng)畫的CSS屬性名稱，而這個(gè)過(guò)渡屬性只有具備一個(gè)中點(diǎn)值的屬性（需要產(chǎn)生動(dòng)畫的屬性）才能具備過(guò)渡效果，其對(duì)應(yīng)具有過(guò)渡的CSS屬性主要有： all（全部）transform改變兩個(gè)或者多個(gè)css屬性的transition效果時(shí)，只要把幾個(gè)transition的聲明串在一起，用逗號(hào)（“，”）隔開(kāi)，然后各自可以有各自不同的延續(xù)時(shí)間和其時(shí)間的速率變換方式。但需要值得注意的一點(diǎn)：第一個(gè)時(shí)間的值為transition-duration，第二個(gè)為transition-delay。三、Keyframes關(guān)鍵幀類似于Flash中的關(guān)鍵幀。使用方法：以“@keyframes”開(kāi)頭，后面緊跟著是動(dòng)畫名稱加上一對(duì)花括號(hào)“{…}”，括號(hào)中就是一些不同時(shí)間段樣式規(guī)則。例如：@keyframesdemo{0%{background:reg;}100%{background:green;}}注意：（1）在一個(gè)“@keyframes”中的樣式規(guī)則可以由多個(gè)百分比構(gòu)成的，如在“0%”到“100%”之間創(chuàng)建更多個(gè)百分比，分別給每個(gè)百分比中給需要有動(dòng)畫效果的元素加上不同的樣式，從而達(dá)到一種在不斷變化的效果。經(jīng)驗(yàn)與技巧：在@keyframes中定義動(dòng)畫名稱時(shí)，其中0%和100%還可以使用關(guān)鍵詞from和to來(lái)代表，其中0%對(duì)應(yīng)的是from，100%對(duì)應(yīng)的是to。Chrome

和

Safari

需要前綴

-webkit-；Foxfire

需要前綴

-moz-。案例展示：變形與動(dòng)畫.htmlanimation的使用方法：animation：animation-name(動(dòng)畫名)animation-duration(動(dòng)畫播放時(shí)間)animation-timing-function(動(dòng)畫播放方式、函數(shù))animation-delay(動(dòng)畫開(kāi)始播放的時(shí)間)animation-iteration-count(動(dòng)畫的播放次數(shù))animation-direction（動(dòng)畫播放方向）animation-play-state（動(dòng)畫的播放狀態(tài))animation-fill-mode(動(dòng)畫時(shí)間外屬性)animation與transition的使用方法類似，只是多了一些屬性值而已，他的具體屬性有：animation-name屬性主要是用來(lái)調(diào)用

@keyframes

定義好的動(dòng)畫。默認(rèn)值：noneIDENT指@keyframes

定義的名字注意：animation-name調(diào)用的動(dòng)畫名需要和“@keyframes”定義的動(dòng)畫名稱完全一致（區(qū)分大小寫）animation-name=transition-propertyanimation-duration(動(dòng)畫播放時(shí)間)要用來(lái)設(shè)置CSS3動(dòng)畫播放時(shí)間，其使用方法和transition-duration類似，是用來(lái)指定元素播放動(dòng)畫所持續(xù)的時(shí)間長(zhǎng)，也就是完成從0%到100%一次動(dòng)畫所需時(shí)間。單位：S秒注意：可以用from表示0，to表示100%。animation-delay屬性用來(lái)定義動(dòng)畫開(kāi)始播放的時(shí)間，用來(lái)觸發(fā)動(dòng)畫播放的時(shí)間點(diǎn)。和transition-delay屬性一樣，用于定義在瀏覽器開(kāi)始執(zhí)行動(dòng)畫之前等待的時(shí)間。animation-iteration-count屬性主要用來(lái)定義動(dòng)畫的播放次數(shù)。取值：其值通常為整數(shù)，但也可以使用帶有小數(shù)的數(shù)字，其默認(rèn)值為1，這意味著動(dòng)畫將從開(kāi)始到結(jié)束只播放一次取值為infinite，動(dòng)畫將會(huì)無(wú)限次的播放。注意：Chrome或Safari瀏覽器，需要加入-webkit-前綴！ animation-direction屬性主要用來(lái)設(shè)置動(dòng)畫播放方向取值：normal是默認(rèn)值，如果設(shè)置為normal時(shí)，動(dòng)畫的每次循環(huán)都是向前播放；alternate，他的作用是，動(dòng)畫播放在第偶數(shù)次向前播放，第奇數(shù)次向反方向播放。animation-play-state屬性主要用來(lái)控制元素動(dòng)畫的播放狀態(tài)。取值：running是其默認(rèn)值，作用是讓動(dòng)畫播放。paused的作用是讓正在播放的動(dòng)畫暫停。注意：通過(guò)running將暫停的動(dòng)畫重新播放，這里的重新播放不一定是從元素動(dòng)畫的開(kāi)始播放，而是從暫停的那個(gè)位置開(kāi)始播放。另外如果暫停了動(dòng)畫的播放，元素的樣式將回到最原始設(shè)置狀態(tài)。animation-fill-mode屬性定義在動(dòng)畫開(kāi)始之前和結(jié)束之后發(fā)生的操作。取值：具有四個(gè)屬性值：none、forwards、backwords和both。屬性值效果none默認(rèn)值，表示動(dòng)畫將按預(yù)期進(jìn)行和結(jié)束，在動(dòng)畫完成其最后一幀時(shí)，動(dòng)畫會(huì)反轉(zhuǎn)到初始幀處forwards表示動(dòng)畫在結(jié)束后繼續(xù)應(yīng)用最后的關(guān)鍵幀的位置backwards會(huì)在向元素應(yīng)用動(dòng)畫樣式時(shí)迅速應(yīng)用動(dòng)畫的初始幀both元素動(dòng)畫同時(shí)具有forwards和backwards效果注意：在默認(rèn)情況之下，動(dòng)畫不會(huì)影響它的關(guān)鍵幀之外的屬性。四多列布局columns屬性它主要應(yīng)用在文本的多列布局方面（類似報(bào)紙、雜志那種多列排版的布局）語(yǔ)法：columns：column-width（寬度）||column-count（欄目數(shù)）多列布局columns屬性參數(shù)主要就兩個(gè)屬性參數(shù)：列寬和列數(shù)。參數(shù)參數(shù)說(shuō)明<column-width>主要用來(lái)定義多列中每列的寬度<column-count>主要用來(lái)定義多列中的列數(shù)多列布局-----column-width定義元素列寬的；取值說(shuō)明屬性值說(shuō)明auto如果column-width設(shè)置值為auto或者沒(méi)有顯式的設(shè)置值時(shí)，元素多列的列寬將由其他屬性來(lái)決定，比如前面的示例就是由列數(shù)column-count來(lái)決定。<length>使用固定值來(lái)設(shè)置元素列的寬度，其主要是由數(shù)值和長(zhǎng)度單位組成，不過(guò)其值只能是正值，不能為負(fù)值。多列布局-----column-count主要用來(lái)給元素指定想要的列數(shù)和允許的最大列數(shù)取值說(shuō)明：屬性值屬性值說(shuō)明auto此值為column-count的默認(rèn)值，表示元素只有一列，其主要依靠瀏覽器計(jì)算自動(dòng)設(shè)置。<integer>此值為正整數(shù)值，主要用來(lái)定義元素的列數(shù)，取值為大于0的整數(shù)，負(fù)值無(wú)效。多列布局-----column-gap主要用來(lái)設(shè)置列與列之間的間距取值說(shuō)明屬性值屬性值說(shuō)明normal默認(rèn)值，默值為1em（如果你的字號(hào)是px，其默認(rèn)值為你的font-size值）。<length>此值用來(lái)設(shè)置列與列之間的距離，其可以使用px,em單位的任何整數(shù)值，但不能是負(fù)值。多列布局-----column-rule主要是用來(lái)定義列與列之間的邊框?qū)挾取⑦吙驑邮胶瓦吙蝾伾ＵZ(yǔ)法規(guī)則：column-rule:<column-rule-width>|<column-rule-style>|<column-rule-color>取值說(shuō)明：屬性值屬性值說(shuō)明column-rule-width類似于border-width屬性，主要用來(lái)定義列邊框的寬度，其默認(rèn)值為“medium”，column-rule-width屬性接受任意浮點(diǎn)數(shù)，但不接收負(fù)值。但也像border-width屬性一樣，可以使用關(guān)鍵詞：medium、thick和thin。column-rule-style類似于border-style屬性，主要用來(lái)定義列邊框樣式，其默認(rèn)值為“none”。column-rule-style屬性值與border-style屬值相同，包括none、hidden、dotted、dashed、solid、double、groove、ridge、inset、outset。column-rule-color類似于border-color屬性，主要用來(lái)定義列邊框顏色，其默認(rèn)值為前景色color的值，使用時(shí)相當(dāng)于border-color。column-rule-color接受所有的顏色。如果不希望顯示顏色，也可以將其設(shè)置為transparent(透明色)多列布局-----column-span主要用來(lái)定義一個(gè)分列元素中的子元素能跨列多少取值說(shuō)明屬性值屬性值說(shuō)明none此值為column-span的默認(rèn)值，表示不跨越任何列。all這個(gè)值跟none值剛好相反，表示的是元素跨越所有列，并定位在列的Ｚ軸之上。響應(yīng)式布局下面我們一起來(lái)看看CSS3MeidaQueries在標(biāo)準(zhǔn)設(shè)備上的運(yùn)用，大家可以把這些樣式加到你的樣式文件中，或者單獨(dú)創(chuàng)建一個(gè)名為“responsive.css”文件，并在相應(yīng)的條件中寫上你的樣式，讓他適合你的設(shè)計(jì)需求：1.1024px顯屏@mediascreenand(max-width:1024px){

/*樣式寫在這里*/

}2.800px顯屏@mediascreenand(max-width:800px){

/*樣式寫在這里*/

}3.640px顯屏@mediascreenand(max-width:640px){

/*樣式寫在這*/

}4.iPad橫板顯屏@mediascreenand(max-device-width:1024px)and(orientation:landscape){

/*樣式寫在這*/

}5.iPad豎板顯屏@mediascreenand(max-device-width:768px)and(orientation:portrait){

/*樣式寫在這*/

}6.iPhone

和

Sma