項目8利用CSS3制作網頁特效01040203目錄定義平移效果

定義縮放效果定義傾斜效果定義2D旋轉效果050607目錄定義變形原點定義3D旋轉效果定義過渡效果08設置過渡效果持續時間0910目錄制作過渡效果速度曲線制作CSS3動畫效果項目描述前面的項目制作的網頁基本是靜態效果，在傳統網頁設計中，一般使用JavaScript腳本或者Flash來制作網頁動態特效，而CSS3提供了對動畫的強大支持，可以實現變形、過渡、動畫等效果，大大降低了制作網頁特效的難度。本項目利用CSS3的這些功能制作一個“旋轉的3D相冊”頁面。項目效果圖知識儲備知識目標理解并掌握transform（變形）屬性的用法和意義。掌握transition（過渡）屬性的用法和意義。010203掌握動畫屬性及屬性對應的不同屬性值的用法和意義。定義平移效果01任務描述利用CSS3中transform屬性的translate()方法定義盒子模型移動后的坐標，實現元素平移效果。平移后的效果如右圖所示。知識點撥

transform01transform是CSS3新增的屬性，可以實現元素的變形效果，如平移、傾斜、縮放及翻轉等。

translate()方法02translate()方法能夠重新定義元素的坐標，實現平移效果，該方法包含兩個參數，分別用于定義X軸和Y軸坐標，基本語法格式如下。transform:translate(x-value,y-value);在上面的語法格式中，x-value指元素在水平方向上移動的距離，y-value指元素在垂直方向上移動的距離，第二個參數可省略，省略后取默認值0，當值為負數時，表示元素向反方向移動。

定義縮放效果02任務描述利用CSS3中transform屬性的scale()方法實現盒子模型放大1.5倍的效果。原效果和放大1.5倍后的效果如右圖所示。

原效果放大1.5倍后的效果知識點撥在CSS3中，可以利用transform屬性的scale()方法實現元素的縮放效果，縮放是指“縮小”和“放大”的意思。scale()方法與translate()方法類似，用法如下。（1）scaleX(x)：元素僅在水平方向上縮放（X軸縮放）。（2）scaleY(y)：元素僅在垂直方向上縮放（Y軸縮放）。（3）scale(x,y)：元素在水平方向和垂直方向上同時縮放（X軸和Y軸同時縮放）。其中，參數x表示元素在X軸方向上的縮放倍數，參數y表示元素在Y軸方向上的縮放倍數。定義傾斜效果03任務描述利用CSS3中transform屬性的skew()方法實現盒子模型傾斜的效果，如右圖所示。任務3效果知識點撥

skew()方法01利用transform屬性的skew()方法可以實現元素的傾斜效果，其用法和translate()、scale()方法類似，基本語法格式如下。transform:skew(x,y);在上面的語法格式中，x和y分別代表相對于X軸和Y軸傾斜的角度，如果省略了第二個參數，則其取默認值0。定義2D旋轉效果04任務描述利用CSS3中transform屬性的rotate()方法實現素材圖片在2D空間中旋轉的效果。旋轉后的效果如右圖所示。任務4效果知識點撥利用transform屬性的rotate()方法能夠實現元素的旋轉效果，主要在2D空間中進行操作，該方法中的參數允許出現負值，這時元素將進行逆時針旋轉，基本語法格式如下。transform:rotate(角度值);

在上面的語法格式中，如果角度值為正值，則元素按照順時針旋轉，否則，按照逆時針旋轉。定義變形原點05任務描述利用transform-origin屬性更改元素變形原點實現元素變形效果。變形后的效果如右圖所示。任務5效果圖知識點撥

transform-origin屬性01通過transform屬性可以實現元素的平移、縮放、傾斜及旋轉效果，這些變形操作是以元素的原點作為參照的。在默認情況下，元素的原點在X軸和Y軸的50%位置，如果需要更改這個原點，就可以使用transform-origin屬性，其基本語法格式如下。transform-origin:x-axisy-axisz-axis;在上面的語法格式中，每個屬性值都代表一個偏移量，具體描述如下表所示。定義3D旋轉效果06任務描述利用rotateX()、rotateY()、rotateZ()、translateZ()及perspective屬性，制作一個可以實現3D旋轉的“禁毒宣傳標語”。旋轉前后的效果分別如右圖所示。旋轉前的效果

旋轉后的效果知識點撥

rotateX()01rotateX()函數用于在3D空間中使元素沿X軸旋轉?。它接受一個角度值作為參數，用于指定旋轉的角度。當參數為正值時，元素順時針旋轉；當參數為負值時，元素逆時針旋轉。基本語法：transform:rotateX(<angle>)，其中<angle>表示旋轉的角度，可以是正值或負值。正值表示順時針旋轉，負值表示逆時針旋轉。

rotateY()、rotateZ()02rotateY()函數用于在3D空間中使元素沿Y軸旋轉?。用法同rotateX()函數類似。?rotateZ()函數用于在3D空間中使元素沿Z軸旋轉?。用法同rotateX()、rotateY()函數類似。?知識點撥

?translateZ()03?translateZ()?用于在3D空間中沿著Z軸重新定位元素，即從觀察者的角度來看，元素會更近或更遠。這個變換由一個長度值定義，指定元素向內或向外移動的距離。正值將元素移向觀察者，負值則遠離觀察者。基本語法：transform:translateZ(z);其中z代表在Z軸上的移動距離。

perspective屬性04?CSS3中的perspective屬性用于設置從何處觀察一個元素的角度，可以理解為視距，主要用于呈現良好的3D透視效果。其基本語法格式如下。perspective:

number|none;在上面的語法格式中，number指元素距視圖的距離，單位為px，none表示不設置透視效果，透視效果由參數值number決定，參數值越小，透視效果越突出。知識點撥

知識補充：rotate3d()方法05rotate3d()方法用于在3D空間中圍繞一個固定軸線旋轉元素，而不使其變形，基本語法格式如下。rotate3d(x,y,z,angle);上述語法格式中各參數的描述如下表所示。

定義過渡效果07任務描述利用transition-property屬性，定義盒子模型由紅色到綠色過渡的效果。過渡前后的效果分別如右圖所示。過渡前的效果

過渡后的效果知識點撥

transition-property屬性01transition-property屬性用于設置過渡效果，基本語法格式如下。transition-property:none|all|property;上述語法格式中各屬性值的具體描述如下表所示。設置過渡效果持續時間08任務描述在任務7的基礎上，利用transition-duration屬性，為過渡效果加上過渡持續的時間，這樣鼠標懸停在元素上實現由紅色到綠色的過渡時會有一個過渡過程，效果如右圖所示。鼠標懸停時顏色的過渡過程（1）（3）（2）知識點撥

transition-duration屬性01transition-duration屬性用于定義過渡效果持續的時間，常用的單位是秒（s）或毫秒（ms），默認值為0。其基本語法格式如下。transition-duration:time;

知識補充：transition-delay屬性02transition-delay屬性用于定義過渡動作從何時開始觸發，屬性值也可以為負值。當為負值時，過渡動作會從該時間點開始觸發，之前的動作將被截斷；當為正值時，過渡動作會延遲觸發。其基本語法格式如下。transition-delay:time;讀者可以在該任務的的案例中嘗試使用，這里就不再做案例補充了。定義過渡效果速度曲線09任務描述結合前面學過的過渡效果相關屬性，并利用transition-timing-function屬性，定義鼠標懸停在元素上時實現過渡動畫效果，過渡動畫過程如右圖所示。鼠標懸停時元素的過渡動畫過程（1）（3）（2）知識點撥

transition-timing-function屬性01transition-timing-function屬性用于定義過渡效果的速度曲線，基本語法格式如下。transition-timing-function:liner|ease|ease-in|ease-out|ease-in-outease-incubic-bezier(n,n,n,n);從上面的語法格式中可以看出，transition-timing-function屬性的取值有很多個，其中，默認值為“ease”，常見屬性值及其描述如下表所示。制作CSS3動畫效果10任務描述結合前面學過的盒子屬性，并利用CSS3動畫中的@keyframes（又稱關鍵幀動畫）及animation相關屬性，定義小球在盒子中的動畫效果。小球動畫某一刻的效果截圖如右圖所示。小球動畫某一刻的效果截圖知識點撥

@keyframes01@keyframes是一種CSS規則，用于定義動畫序列，指定了動畫從開始到結束的各個關鍵幀。在@keyframes中指定某項CSS樣式，就能創建由當前樣式逐漸變為新樣式的動畫效果。在動畫運行過程中可以多次更改CSS樣式，使用百分比（%）來規定改變發生的時間，或者通過關鍵字from和to，其等價于0%和100%。0%是動畫的開始時間，100%是動畫的結束時間。該任務中設定了從0%到25%再到50%再到75%，最后到100%的動畫過程。注意：InternetExplorer10、Firefox及Opera瀏覽器支持@keyframes規則，Chrome和Safarii需要添加前綴-webkit-，-moz-代表Firefox瀏覽器內核識別碼、-o-代表Opera瀏覽器內核識別碼。本書建議使用chrome瀏覽器，該任務重的-webkit-也正是針對chrome瀏覽器而設的兼容代碼。知識點撥

animation屬性02animation屬性用于實現動畫，包括以下幾個子屬性：animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction、animation-fill-mode、animation-play-state。其基本語法格式如下。animation:animation-nameanimation-durationanimation-timing-functionanimation-delayanimation-iteration-countanimation-directionanimation-fill-modeanimation-play-state;animation屬性值及其描述如下表所示。知識點撥

animation屬性02在該任務中，animation:mymove8slinearinfinite;將幾個屬性集合在一起，分開后就是：animation-name：my