css過(guò)渡模塊和2d轉(zhuǎn)換模塊

（一）過(guò)度模塊的三要素：

創(chuàng)新互聯(lián)建站長(zhǎng)期為上千多家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開(kāi)放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為房縣企業(yè)提供專業(yè)的網(wǎng)站制作、成都網(wǎng)站建設(shè)，房縣網(wǎng)站改版等技術(shù)服務(wù)。擁有十多年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開(kāi)發(fā)。

1、必須要有屬性發(fā)生變化

　　　2、必須告訴系統(tǒng)哪個(gè)屬性需要執(zhí)行過(guò)渡效果

3、必須告訴系統(tǒng)過(guò)渡效果持續(xù)時(shí)長(zhǎng)

 　　　ps：當(dāng)多個(gè)屬性需要同時(shí)執(zhí)行過(guò)渡效果時(shí)用逗號(hào)隔開(kāi)即可

transition-property: width, background-color;

transition-duration: 5s, 5s;

示例代碼：

    
    過(guò)渡模塊

 效果圖：

   變化前

     變化中

    變化后

 

（二）過(guò)渡模塊的其它屬性：

1、告訴系統(tǒng)延遲多少秒之后才開(kāi)始過(guò)渡動(dòng)畫(huà)：transition-delay: 2s;

2、告訴系統(tǒng)過(guò)渡動(dòng)畫(huà)的運(yùn)動(dòng)的速度：transition-timing-function: linear;

示例代碼：

    
    
    

    
linear
    
ease
    
ease-in
    
ease-out
    
ease-in-out

不同的運(yùn)動(dòng)速度會(huì)導(dǎo)致不同的過(guò)渡效果，請(qǐng)看運(yùn)行效果圖：

 運(yùn)動(dòng)前

 運(yùn)動(dòng)中

 運(yùn)動(dòng)后

（三）過(guò)渡連寫(xiě)格式
　　　　　　transition: 過(guò)渡屬性 過(guò)渡時(shí)長(zhǎng) 運(yùn)動(dòng)速度 延遲時(shí)間;

過(guò)渡連寫(xiě)注意點(diǎn)
　　　　　　　　1和分開(kāi)寫(xiě)一樣, 如果想給多個(gè)屬性添加過(guò)渡效果也是用逗號(hào)隔開(kāi)即可
　　　　　　　　2連寫(xiě)的時(shí)可以省略后面的兩個(gè)參數(shù), 因?yàn)橹灰帉?xiě)了前面的兩個(gè)參數(shù)就已經(jīng)滿足了過(guò)渡的三要素
　　　　　　　　3如果多個(gè)屬性運(yùn)動(dòng)的速度/延遲的時(shí)間/持續(xù)時(shí)間都一樣, 那么可以簡(jiǎn)寫(xiě)為：transition:all 0s;

示例代碼：

 

 　　　　 （四）過(guò)度模塊的編寫(xiě)套路和案例

編寫(xiě)套路：

1、不要管過(guò)渡, 先編寫(xiě)基本界面

2、修改我們認(rèn)為需要修改的屬性

3、再回過(guò)頭去給被修改屬性的那個(gè)元素添加過(guò)渡即可

案例1：

思路：

1、先做好基本頁(yè)面布局，給div和span添加樣式表；

2、考慮怎么實(shí)現(xiàn)要做的效果，和需要變動(dòng)的屬性

3、給屬性添加過(guò)渡效果，在只有一種屬性變動(dòng)或多個(gè)屬性過(guò)渡時(shí)間等相同的情況下推薦使用：transition:all 1s;

    
    
    

    L
    M
    S
    碼
    農(nóng)
    來(lái)
    過(guò)
    渡

 示例圖片：

過(guò)渡前

過(guò)渡中

過(guò)度后

 

 

案例2：

手風(fēng)琴效果，示例代碼：

    
    過(guò)渡模塊-手風(fēng)琴效果

 

思路：

1、通過(guò)浮動(dòng)做好基本布局，如圖：

2、考慮需要實(shí)現(xiàn)的效果，如下圖，即鼠標(biāo)移入后，具有:hover事件的li寬度變大，其余的等大。

我們可以通過(guò)ul的:hover事件讓所有的li變小，然后通過(guò)li的:hover時(shí)間來(lái)使當(dāng)前l(fā)i寬度變大。案例事小，思路是大，這種思路在以后的js中或者其他的地方經(jīng)常用到，即先將所有元素初始化，在單獨(dú)改變需要改變的元素屬性。

二、2d轉(zhuǎn)換模塊transform

（一）寫(xiě)法：transform:值;transform的值常用的有3種：

1、旋轉(zhuǎn)：其中deg是單位, 代表多少度：transform: rotate(45deg);

2、移動(dòng)：第一個(gè)參數(shù):水平方向，第二個(gè)參數(shù):垂直方向，transform: translate(100px, 0px);

3、縮放：第一個(gè)參數(shù):水平方向，第二個(gè)參數(shù):垂直方向，transform: scale(0.5, 0.5);transform: scale(1.5);

注意點(diǎn):

如果取值是1, 代表不變

如果取值大于1, 代表需要放大

如果取值小于1, 代表需要縮小

如果水平和垂直縮放都一樣, 那么可以簡(jiǎn)寫(xiě)為一個(gè)參數(shù)

ps：1、如果需要進(jìn)行多個(gè)轉(zhuǎn)換, 那么用空格隔開(kāi)

2、2D的轉(zhuǎn)換模塊會(huì)修改元素的坐標(biāo)系, 所以旋轉(zhuǎn)之后再平移就不是水平平移的

示例代碼：

    
    
    

    
正常的
    
旋轉(zhuǎn)的
    
平移的
    
縮放的
    
綜合的

示例圖片：

（二）轉(zhuǎn)換模塊的形變中心點(diǎn)：

默認(rèn)情況下所有的元素都是以自己的中心點(diǎn)作為參考來(lái)旋轉(zhuǎn)的, 我們可以通過(guò)形變中心點(diǎn)屬性來(lái)修改它的參考點(diǎn)。

1、寫(xiě)法：transform-origin: left top;第一個(gè)參數(shù):水平方向，第二個(gè)參數(shù):垂直方向。

ps：取值有三種形式

具體像素：transform-origin: 200px 0px;

百分比：transform-origin: 50% 50%;

特殊關(guān)鍵字：transform-origin: center center;

 　　　　　　2、示例代碼：

 

 

 　　　?。ㄈ?d轉(zhuǎn)換模塊的旋轉(zhuǎn)軸

rotate旋轉(zhuǎn)屬性旋轉(zhuǎn)是默認(rèn)都是圍繞z軸旋轉(zhuǎn)，若需要改變旋轉(zhuǎn)軸可以在rotate后加上旋轉(zhuǎn)軸，即：rotateX();rotateY();rotateZ();

1、當(dāng)圍繞x和y軸旋轉(zhuǎn)時(shí)就會(huì)改變屬性距離我們的距離，也就是透視，什么事透視呢，就是近大遠(yuǎn)小。

2、你會(huì)發(fā)現(xiàn)元素圍繞x軸或y軸旋轉(zhuǎn)時(shí)并沒(méi)有金達(dá)遠(yuǎn)小的效果，這時(shí)你需要添加一個(gè)透視屬性：perspective: 500px;注意：這個(gè)屬性需要添加在元素的父容器上；

 

 示例圖片：

網(wǎng)站名稱：css過(guò)渡模塊和2d轉(zhuǎn)換模塊
瀏覽路徑：http://m.jiaotiyi.com/article/gcopeh.html