第二篇：項目實戰(zhàn)篇任務(wù)3：“英博特智能科技”企業(yè)網(wǎng)站首頁頁面制作3.8案例展示3.8

案例展示（1）熟練掌握彈性布局。（2）掌握CSS3過渡效果的設(shè)置。（3）學(xué)會CSS3轉(zhuǎn)換效果的設(shè)置。能力要求學(xué)習(xí)導(dǎo)覽任務(wù)概述完成首頁頁面中產(chǎn)品展示模塊的制作，在該模塊中，上面是標(biāo)題，下面是三個案例內(nèi)容和更多超鏈接。3.8

案例展示任務(wù)思考（1）CSS3過渡效果對所有屬性均可設(shè)置么？

（2）鼠標(biāo)移上對子元素設(shè)置樣式時hover與子元素之間的分隔符是？

（3）行內(nèi)元素設(shè)置浮動需要清除浮動么？

3.8

案例展示認(rèn)識CSS3CSS3是CSS（層疊樣式表）技術(shù)的升級版本，主要包括盒子模型、列表模塊、超鏈接方式、語言模塊、背景和邊框、文字特效、多欄布局等模塊。CSS3不僅有利于網(wǎng)站的開發(fā)與維護，還能提高網(wǎng)站的性能，增加網(wǎng)站的可訪問性、可用性，使網(wǎng)站能適配更多的設(shè)備，甚至還可以優(yōu)化網(wǎng)站，提高網(wǎng)站的搜索排名結(jié)果。CSS3的新特征有很多，例如圓角效果、圖形化邊界、塊陰影與文字陰影、元素的過渡效果、多背景圖、文字或圖像的變形處理（旋轉(zhuǎn)、縮放、傾斜、移動）、多欄布局、媒體查詢等等。

3.8

案例展示CSS3轉(zhuǎn)換CSS3轉(zhuǎn)換（transform）功能可以實現(xiàn)元素的平移、旋轉(zhuǎn)、縮放或傾斜。transform:none/*不應(yīng)用任何變換*/transform:<transform-function>/*應(yīng)用一個或多個<transform-function>值，以空格分開*/說明：<transform-function>是CSS的一種數(shù)據(jù)類型，用于對元素的顯示做變換，包括二維變換和三維變換?；菊Z法：3.8

案例展示元素的平移translate方法實現(xiàn)元素的平移，語法如下：translate(tx,ty)/*二維*/①tx：要移動矢量的橫坐標(biāo)。②ty：要移動矢量的縱坐標(biāo)?？梢圆粚懀J(rèn)為0。translate3d(tx,ty,tz)/*三維*/①tx：移動矢量的橫坐標(biāo)。②ty：移動矢量的縱坐標(biāo)。③tz：移動矢量的z軸坐標(biāo)。不能使用百分比，否則會被認(rèn)為無效屬性。★translateX(t)、translateY(t)、translateZ(t)分別是translate(tx,0)、translate(0,ty)、translate3d(0,0,tz)的簡寫形式。3.8

案例展示元素平移示例【示例代碼】2-3-7.html。translate方法實現(xiàn)元素的平移3.8

案例展示元素的旋轉(zhuǎn)rotate方法實現(xiàn)元素的旋轉(zhuǎn)，語法如下：rotate(a)/*二維*/參數(shù)表示旋轉(zhuǎn)的角度。正角表示順時針旋轉(zhuǎn)，負(fù)角表示逆時針旋轉(zhuǎn)rotate3d(x,y,z,a)/*三維*/①x：旋轉(zhuǎn)向量的x坐標(biāo)。②y：旋轉(zhuǎn)向量的y坐標(biāo)。③z：旋轉(zhuǎn)向量的z坐標(biāo)。④a：旋轉(zhuǎn)角度。正值表示順時針，負(fù)值表示逆時針。★

rotateX(a)、rotateY(a)、rotateZ(a)分別是rotate3d(1,0,0,a),rotate3d(0,1,0,a),rotate3d(0,0,1,a)的簡寫。3.8

案例展示元素旋轉(zhuǎn)示例【示例代碼】2-3-8.html。rotate方法實現(xiàn)元素的旋轉(zhuǎn)3.8

案例展示元素的縮放scale方法實現(xiàn)元素的縮放，語法如下：scale(sx)/*二維*/scale(sx,sy)/*二維*/①sx：縮放矢量的橫坐標(biāo)。②sy：縮放矢量的縱坐標(biāo)。若不存在，則默認(rèn)值與sx相同，即元素均勻縮放。scale3d(sx,sy,sz)/*三維*/參數(shù)sx、sy、sz分別表示在橫軸、縱軸、z軸的縮放大小。3.8

案例展示元素縮放示例【示例代碼】2-3-9.html。scale方法實現(xiàn)元素的縮放3.8

案例展示元素的傾斜skew方法實現(xiàn)元素的傾斜，語法如下：skew(ax)skew(ax,ay)參數(shù)ax、ay表示沿橫、縱坐標(biāo)扭曲元素的程度，是一個角度

★skewX(a)水平拉伸，將元素每個點在水平方向上扭曲一定程度。參數(shù)是一個角度，表示用于沿著橫坐標(biāo)扭曲元素的角度。★

skewY(a)垂直拉伸，將元素每個點在垂直方向上扭曲一定程度。參數(shù)是一個角度，表示用于沿著縱坐標(biāo)扭曲元素的角度。3.8

案例展示元素傾斜示例【示例代碼】2-3-10.html。skew方法實現(xiàn)元素的傾斜3.8

案例展示任務(wù)實施實現(xiàn)三列布局02.設(shè)置文本內(nèi)容樣式03.01.搭建案例展示模塊結(jié)構(gòu)具體要求見任務(wù)書設(shè)置CSS3轉(zhuǎn)換效果04.3.8

案例展示討論區(qū)運用所學(xué)知識