模塊九轉(zhuǎn)換、過渡與動畫《HTML5+CSS3網(wǎng)頁設(shè)計基礎(chǔ)》學(xué)習(xí)目標/Target理解CSS3

2D轉(zhuǎn)換，并掌握常用的2D轉(zhuǎn)換。理解CSS3

3D轉(zhuǎn)換，并掌握常用的3D轉(zhuǎn)換。能夠掌握CSS3的過渡效果。理解過渡與動畫的區(qū)別，并能制作簡單動畫。CSS32D轉(zhuǎn)換任務(wù)一CSS轉(zhuǎn)換（Transform）是作為網(wǎng)頁上高級顯示和動畫的高速渲染規(guī)范而誕生的。CSS中的2D轉(zhuǎn)換允許在二維空間中執(zhí)行一些基本的變換操作，例如移動、旋轉(zhuǎn)、縮放或扭曲等。變換后的元素與絕對定位的元素類似，不會影響周圍的元素，但可以和周圍的元素重疊，不同的是，轉(zhuǎn)換后的元素仍處于文檔流（在頁面中仍然會占用為轉(zhuǎn)換之前的空間）。CSS32D轉(zhuǎn)換一、轉(zhuǎn)換中的二維坐標系轉(zhuǎn)換元素的左上角是坐標原點，向右為x軸的正方向，向下是y軸的正方向。二、2D位移2D位移可以改變元素的位置。可以通過transform屬性translate()方法來實現(xiàn)?；菊Z法格式如下：transform:translate(x,y);在實際開發(fā)中，如果只希望元素水平方向或垂直方向上的移動，還可以通過transform屬性translateX()方法或translateY()方法來實現(xiàn)。transform:translateX(50px);transform:translateY(50px);二、2D位移利用CSS3的2D位移，配合定位技術(shù)，可實現(xiàn)元素水平垂直居中。例如：.box{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);}【例9-1】2D位移。二、2D位移/*沿X軸正向位移50px*/.one{transform:translateX(50px);}/*沿Y軸正向位移自身高度的30%*/.two{transform:translateY(30%);}/*沿X軸反向位移20px，Y軸正向位移20px*/.three{transform:translate(-20px,20px);}三、2D縮放2D縮放可以實現(xiàn)元素的放大或縮小。可以通過transform屬性scale()方法來實現(xiàn)。基本語法格式如下：transform:scale(x,y);在實際開發(fā)中，如果只希望元素水平方向或垂直方向上的縮放，還可以通過transform屬性scaleX(angle)方法或scaleY(angle)方法來實現(xiàn)。三、2D縮放【例9-2】2D縮放。

/*沿X軸縮放0.8px*/.one{transform:scaleX(0.8);}/*沿Y軸縮放1.2*/.two{transform:scaleY(1.2);}/*沿X軸縮放1.2，Y軸縮放-0.8*/.three{transform:scale(1.2,-0.8);}四、2D旋轉(zhuǎn)2D旋轉(zhuǎn)可以讓元素在二維平面內(nèi)（沿Z軸，Z軸方向是由屏幕垂直指向讀者），順時針旋轉(zhuǎn)或逆時針旋轉(zhuǎn)。可以通過transform屬性rotate()方法來實現(xiàn)?；菊Z法格式如下：transform:rotate(angle);在上面的語法中，參數(shù)angle表示旋轉(zhuǎn)的角度值，單位是deg。角度值為正值表示順時針旋轉(zhuǎn)，負值表示逆時針旋轉(zhuǎn)。旋轉(zhuǎn)參考點為元素的中心點。【例9-3】2D旋轉(zhuǎn)。四、2D旋轉(zhuǎn)

/*2D旋轉(zhuǎn)30度*/.one{transform:rotate(30deg);}/*2D旋轉(zhuǎn)-30度*/.two{transform:rotate(-30deg);}五、2D扭曲2D扭曲可以讓元素在二維平面內(nèi)被“拉扯”，進而“走形”，實際開發(fā)幾乎不用，了解即可。2D扭曲可以通過transform屬性skew()方法來實現(xiàn)。基本語法格式如下：transform:skew(x-angle,y-angle);在上面的語法中，參數(shù)x-angle、y-angle分別用于定義水平（x軸）和垂直（y軸）的扭曲角度值，單位是deg。取值可以是正值或負值，表示不同的扭曲方向?！纠?-4】2D扭曲。五、2D扭曲

/*沿X軸扭曲*/.one{transform:skewX(20deg);}/*沿Y軸扭曲*/.two{transform:skewY(20deg);}/*沿X軸，Y軸同時扭曲*/.three{transform:skew(20deg,20deg);}六、變換原點元素變換時，默認的原點是元素的中心（50%50%0），使用transform-origin

可以設(shè)置變換的原點。修改變換原點對位移沒有影響，對旋轉(zhuǎn)、縮放和扭曲會產(chǎn)生影響?；菊Z法格式如下：transform-origin:x-axisy-axisz-axis;（1）x-axis：定義原點X軸方向位于元素的位置（默認值50%，即中間）?？赡艿闹担簂eft|center|right|length|%。（2）y-axis：定義原點Y軸方向位于元素的位置（默認值50%，即中間）?？赡艿闹担簍op|center|bottom|length|%。（3）z-axis：定義原點Z軸方向位于元素的位置（默認值0，即XY平面）。只能定義值：length。

/*變換原點后的2D旋轉(zhuǎn)30度*/.one{transform:rotate(30deg);}/*變換原點左上角后的2D旋轉(zhuǎn)30度*/.two{transform-origin:0px0px;transform:rotate(30deg);}【例9-5】變換原點旋轉(zhuǎn)。六、變換原點七、matrix()方法matrix()方法可以看作是skew()、scale()和translate()幾個方法的縮寫形式，通過matrix()方法可以同時定義2D扭曲、縮放和位移操作?；菊Z法格式如下：transform:matrix(a,b,c,d,tx,ty);在上面的語法中，參數(shù)a,b,c,d分別代表方法scaleX(),skewY(),skewX(),scaleY()，它們共同代表一個線性變換。tx和ty表示位移，分別代表translateX()和translateY()。.one{width:100px;height:100px;background-color:aqua;text-align:center;line-height:100px;/*多重轉(zhuǎn)換*/transform:translate(50%,50%)rotate(45deg);}【例9-6】多重變換。六、變換原點CSS33D轉(zhuǎn)換任務(wù)二CSS33D轉(zhuǎn)換在CSS中，除了可以對頁面中的元素進行2D轉(zhuǎn)換外，還可以對象元素進行3D轉(zhuǎn)換（將頁面看作是一個三維空間來對頁面中的元素進行移動、旋轉(zhuǎn)、縮放和傾斜等操作）。與2D轉(zhuǎn)換相同，3D轉(zhuǎn)換同樣不會影響周圍的元素，而且可以與其它元素重疊。變換后的元素仍處于文檔流（在頁面中仍然會占用為轉(zhuǎn)換之前的空間）。一、開啟3D空間元素進行3D變換的首要操作需要將父元素開啟3D空間。使用transform-style開啟3D空間?；菊Z法格式如下：transform-style:flat|preserve-3d;（1）flat：讓子元素位于此元素的二維平面內(nèi)（2D空間），此為默認值。（2）preserve-3d：讓子元素位于此元素的三維空間內(nèi)（3D空間）。二、設(shè)置景深perspective:none|value;（1）none：不指定透視（默認值）（2）value：長度值。指定觀察者距離z=0平面的距離（一般距離設(shè)置在500px-1000px），不允許負值。何為景深？指定觀察者與z=0平面（可理解為屏幕）的距離，能讓發(fā)生3D變換的元素，產(chǎn)生透視效果，看來更加立體。使用perspective設(shè)置景深?；菊Z法格式如下：三、透視點位置perspective-origin:x-axis,y-axis,z-axis;（1）x-axis：定義視圖被置于X軸的何處。可能的值：left|center|right|length|%。（2）y-axis：定義視圖被置于Y軸的何處?？赡艿闹担簍op|center|bottom|length|%。（3）z-axis：定義視圖被置于Z軸的何處?？赡艿闹担簂ength。默認值為50%50%0，表示透視點位置在元素的中心位置。所謂透視點位置，就是觀察者位置，默認的透視點處于轉(zhuǎn)換元素的中心。使用perspective-origin設(shè)置觀察者位置（透視點的位置）?；菊Z法格式如下：四、3D旋轉(zhuǎn)rotateX(angle):設(shè)置x軸旋轉(zhuǎn)角度，需指定一個角度值（deg），面對x軸正方向：正值順時針，負值逆時針。rotateY(angle):設(shè)置y軸旋轉(zhuǎn)角度，需指定一個角度值（deg），面對y軸正方向：正值順時針，負值逆時針。rotate3d(x,y,z,angle):前3個參數(shù)分別表示坐標軸：x、y、z，第4個參數(shù)表示旋轉(zhuǎn)的角度，參數(shù)不允許省略。例如：transform:rotate3d(1,1,1,30deg)的意思是x、y、z分別旋轉(zhuǎn)30度。3D旋轉(zhuǎn)主要是讓元素沿x軸和y軸旋轉(zhuǎn)，具體使用方式如下。（1）先給元素添加轉(zhuǎn)換屬性transform。（2）編寫transform的具體值。四、3D旋轉(zhuǎn)【例9-7】CSS轉(zhuǎn)換之3D旋轉(zhuǎn)。

/*沿X軸旋轉(zhuǎn)*/.one{transform:rotateX(45deg);}/*沿Y軸旋轉(zhuǎn)*/.two{transform:rotateY(45deg);}/*同時沿XY軸旋轉(zhuǎn)*/.three{transform:rotate3d(1,1,0,45deg);}五、3D位移translateZ(z):設(shè)置z軸位移，需指定長度值，正值向屏幕外，負值向屏幕里，且不能寫百分比translate3d(x,y,z):第1個參數(shù)對應(yīng)x軸，第2個參數(shù)對應(yīng)y軸，第3個參數(shù)對應(yīng)z軸，且均不能省略2D位移是讓元素沿x、y軸位移，3D位移是讓元素沿z軸位移。3D位移相關(guān)方法如下：五、3D位移【例9-8】CSS轉(zhuǎn)換之3D位移。

/*沿Z軸位移*/.one{transform:translateZ(-50px);}/*同時沿XZ軸位移*/.two{transform:translate3d(50px,0,50px);}六、3D縮放scaleZ(z):設(shè)置z軸方向的縮放比例，值為一個數(shù)字，1表示不縮放，大于1放大，小于1縮小。scale3d(x,y,z):第1個參數(shù)對應(yīng)x軸，第2個參數(shù)對應(yīng)y軸，第3個參數(shù)對應(yīng)z軸，參數(shù)不允許省略。3D縮放是讓元素沿z軸縮放。3D縮放相關(guān)方法如下：六、3D縮放【例9-9】CSS轉(zhuǎn)換之3D縮放。

/*沿Z軸縮放（旋轉(zhuǎn)后才能看到效果）*/.one{transform:scaleZ(0.6)rotateX(45deg);}

/*旋轉(zhuǎn)不縮放，作為對比*/.two{transform:rotateX(45deg);}利用CSS過渡效果任務(wù)三利用CSS過渡效果CSS提供了強大的過渡屬性，使用此屬性可以在不使用Flash動畫或JavaScript腳本的情況下，為元素從一種形式轉(zhuǎn)變?yōu)榱硗庖环N形式添加效果。例如，漸隱、漸顯、速度的變化等。CSS3的過渡屬性主要包括transition-property、transition-duration、transition-timing-function和transition-delay等。一、過渡屬性選擇器{transition-property:none|all|property;…}（1）none：沒有屬性獲得過渡效果（默認值）。（2）all：所有屬性都將獲得過渡效果。（3）property：定義過渡效果的CSS屬性名稱，多個屬性之間用逗號分隔。transition-property屬性設(shè)置應(yīng)用過渡的CSS屬性。其語基本法格式如下：一、過渡屬性【例9-10】transition-property屬性使用演示。當(dāng)鼠標懸停在區(qū)塊上，區(qū)塊大小改變。<style>div{width:100px;height:100px;background:red;transition-property:width,height;}div:hover{width:200px;height:200px;}</style>二、過渡持續(xù)時間屬性選擇器{transition-duration:time;}transition-duration屬性的默認值是0。time取值為時間，可以是秒（m）或者毫秒（ms）。例如，將上例的樣式代碼修改如下：transition-duration屬性用于定義過渡屬性的持續(xù)時間。其語法格式如下：div{width:100px;height:100px;background:red;transition-property:width,height;transition-duration:2s;}三、過渡速度曲線屬性選擇器{transition-timing-function:linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);}（1）linear：規(guī)定以相同速度開始至結(jié)束的過渡效果。（2）ease：默認值。規(guī)定慢-快-慢的過渡效果。（3）ease-in：規(guī)定以慢速開始的過渡效果。（4）ease-out：規(guī)定以慢速結(jié)束的過渡效果。（5）ease-in-out：規(guī)定以慢速開始和結(jié)束的過渡效果。（6）cubic-bezier(n,n,n,n)：在cubic-bezier（貝塞爾曲線）函數(shù)中定義自己的值。0~1之間的數(shù)值。transition-timing-function

屬性規(guī)定了過渡效果的速度曲線。其基本語法格式如下：三、過渡速度曲線屬性【例9-11】transition-timing-function屬性使用演示。當(dāng)鼠標懸停在區(qū)塊上，區(qū)塊過渡效果的速度曲線變化。三、過渡速度曲線屬性【例9-11】transition-timing-function屬性使用演示。當(dāng)鼠標懸停在區(qū)塊上，區(qū)塊過渡效果的速度曲線變化。

.box1{background-color:skyblue;transition-timing-function:ease;}.box2{background-color:orange;transition-timing-function:linear;}.box3{background-color:gray;transition-timing-function:ease-in;}.box4{background-color:tomato;transition-timing-function:ease-out;}.box5{background-color:green;transition-timing-function:ease-in-out;}.box6{background-color:purple;transition-timing-function:step-start;}.box7{background-color:deepskyblue;transition-timing-function:step-end;}.box8{background-color:chocolate;transition-timing-function:steps(20,end);}.box9{background-color:gold;transition-timing-function:cubic-bezier(1,.35,.78,1.24);}四、過渡延遲時間屬性選擇器{transition-delay:time;}transition-delay屬性的默認值是0。time取值為時間，可以是秒（m）或者毫秒（ms）。例如，將上例的樣式代碼修改如下：transition-delay

屬性規(guī)定了過渡效果切換的延遲時間。其基本語法格式如下：div:hover{border-radius:50%;background:pink;transition-property:border-radius,background;transition-timing-function:ease-in-out;transition-duration:2s;transition-delay:200ms;}五、過渡復(fù)合屬性選擇器{transition:propertydurationtiming-functiondelay;}使用transition-delay屬性設(shè)置過渡效果可以簡化代碼的書寫，但在定義時，它的各個參數(shù)必須按照順序進行設(shè)置，不能顛倒。transition屬性是一個復(fù)合屬性，用于在同一個屬性中設(shè)置transition-property、transition-duration、transition-timing-function和transition-delay等4個過渡屬性。其基本語法格式如下：五、過渡復(fù)合屬性div:hover{border-radius:50%;transition-property:border-radius,background;transition-duration:2s;transition-timing-function:ease-in-out;transition-delay:200ms;}可以簡寫為：例如，代碼：div:hover{background:pink;transition:border-radius2sease-in-out200ms;}CSS3動畫制作任務(wù)四一、動畫中的基本概念一段動畫，從本質(zhì)上講就是一段時間內(nèi)連續(xù)播放的一定數(shù)量的畫面。每一幅畫面叫做“幀”。1．幀關(guān)鍵幀是指在構(gòu)成一段動畫的若干幀中，起到?jīng)Q定性作用的2~3幀。如圖所示。2．關(guān)鍵幀二、過渡和動畫的區(qū)別（1）動畫不需要事件觸發(fā)，過渡需要事件觸發(fā)。（2）過渡只有一組關(guān)鍵幀（開始-結(jié)束），動畫可以設(shè)置多個關(guān)鍵幀。三、動畫的基本使用@keyframes規(guī)則用來定義動畫各個階段（關(guān)鍵幀）的屬性值，語法格式如下：1．定義關(guān)鍵幀（定義動畫）@keyframes動畫名{from{properties:value;}/*percentage：定義動畫的各個階段（關(guān)鍵幀），為百分比值，可以添加若干個*/percentage{properties:value;}to{properties:value;}}三、動畫的基本使用給元素應(yīng)用動畫需要兩個必要的屬性。（1）animation-name：給元素指定具體的動畫（指定要綁定到選擇器的關(guān)鍵幀的名稱）。（2）animation-duration：設(shè)置動畫所需時間。2．給元素應(yīng)用動畫三、動畫的基本使用【例9-12】CSS動畫。<style>@keyframesball{from{top:0px;left:0px;}25%{top:0px;left:350px;}50%{top:200px;left:350px;}75%{top:200px;left:0px;}to{top:0px;left:0px;}}div{width:100px;height:100px;border-radius:50%;background-color:red;position:relative;/*動畫必要屬性*/animation-name:ball;animation-duration:2s;}</style>四、動畫的屬性用于設(shè)置動畫延遲，屬性值為數(shù)值，單位為s（秒）或ms（毫秒）。1．a(chǎn)nimation-delay屬性四、動畫的屬性設(shè)置動畫的類型（與過渡類似），常用值如下。（1）ease：平滑動畫（默認值）。（2）linear：線性過渡。（3）ease-in：慢→快。（4）ease-out：快→慢。（5）ease-in-out：慢→快→慢。（6）step-start：等同于steps(1,start)。（7）step-end：等同于steps(1,end)。（8）steps(integer,?)：接受兩個參數(shù)的步進方法。（9）cubic-bezie(number,number,number,number)：特定的貝塞爾曲線類型。2．a(chǎn)nimation-timing-function屬性四、動畫的屬性指定動畫的播放次數(shù)。（1）number：動畫循環(huán)次數(shù)。（2）infinite：無限循環(huán)。3．a(chǎn)nimation-iteration-count屬性四、動畫的屬性用于指定動畫方向。（1）normal：正常方向(默認)。（2）reverse：反方向運行。（3）alternate：先正向運行，再反方向運行，并持續(xù)交替運行。（4）alternate-reverse：先反運行，再正方向運行，并持續(xù)交替運行。4．a(chǎn)nimation-direction屬性四、動畫的屬性設(shè)置當(dāng)動畫播放結(jié)束之后對象的狀態(tài)（無限循環(huán)時不能用）（1）forwards：設(shè)置對象狀態(tài)為動畫結(jié)束時的狀態(tài)。（2）backwards：設(shè)置對象狀態(tài)為動畫開始時的狀態(tài)。5.animation-fill-mode屬性四、動畫的屬性設(shè)置動畫的播放狀態(tài)（一般與事件關(guān)聯(lián)變化）。（1）running：運動（默認）。（2）paused：暫停。6.animation-play-state屬性四、動畫的屬性通過animation屬性可以同時定義上述的多個屬性，語法格式如下：7.動畫的復(fù)合屬性animation:animation-nameanimation-durationanimation-timing-functionanimation-delayanimation-iteration-countanimation-directionanimation-fill-modeanimation-play-state;其中每個參數(shù)分別對應(yīng)前面介紹的各個屬性，如果省略其中的某個或多個值，則將使用該屬性對應(yīng)的默認值。說明：animation-play-state一般單獨使用。三、動畫的基本使用【例9-13】CSS動畫之其他屬性。div{width:100px;height:100px;border-radius:50%;

background-color:red;position:relative;/*動畫必要屬性*/animation-name:ball;animation-duration:2s;/*依次添加下列屬性，并改變屬性值看效果的變化*/animation-delay:2s;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:alternate;}四、動畫的屬性【例9-14】CSS動畫之復(fù)合屬性。<style>.boy{width:184px;height:325px;background-image:url('images/boy.png');margin:0auto;margin-top:100px;animation:boy1ssteps(7)infinite;}@keyframesboy{from{}to{background-position:-1288px0px;}}</style>實戰(zhàn)案例任務(wù)五用CSS3動畫制作一個圖片輪播，效果如圖所示。實戰(zhàn)案例一、原理分析（1）設(shè)置一個用于顯示輪播圖片的容器。（2）設(shè)置一個存放圖片的容器（本例用4張圖片）。該容器是顯示輪播圖片容器的子元素。（3）為存放圖片容器添加步進動畫（每秒中向左移動一張圖片的位置）。（4）設(shè)置指示器。（5）為指示器添加背景。（6）指示器背景向右移動。二、制作頁面結(jié)構(gòu)<body><divclass="carousel"><section><div><imgsrc="imag