本篇內(nèi)容介紹了“CSS樣式更改之2D轉(zhuǎn)換的方法有哪些”的有關(guān)知識，在實(shí)際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

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

2D轉(zhuǎn)換
1).元素位移translate(左邊,頂邊)

div { transform: translate(50px,100px); -ms-transform: translate(50px,100px);    /* IE 9 */ -webkit-transform: translate(50px,100px);  /* Safari and Chrome */ -o-transform: translate(50px,100px);    /* Opera */ -moz-transform: translate(50px,100px);    /* Firefox */ }

2).元素旋轉(zhuǎn)rotate(角度)

div { transform: rotate(10deg); -ms-transform: rotate(10deg);    /* IE 9 */ -webkit-transform: rotate(10deg);  /* Safari and Chrome */ -o-transform: rotate(10deg);    /* Opera */ -moz-transform: rotate(10deg);    /* Firefox */ } rotate() scale() skew() matrix()

3).元素縮放scale(寬度倍數(shù)，高度倍數(shù))

div { transform: scale(1,2); -ms-transform: scale(1,2);  /* IE 9 */ -webkit-transform: scale(1,2);  /* Safari 和 Chrome */ -o-transform: scale(1,2);  /* Opera */ -moz-transform: scale(1,2);  /* Firefox */ }

4).元素翻轉(zhuǎn)給定的角度 skew(x,y)

div { transform: skew(13deg,21deg); -ms-transform: skew(13deg,21deg);  /* IE 9 */ -webkit-transform: skew(13deg,21deg);  /* Safari and Chrome */ -o-transform: skew(13deg,21deg);  /* Opera */ -moz-transform: skew(13deg,21deg);  /* Firefox */ }

5).將前面所有方法進(jìn)行組合matrix()

div { transform:matrix(1.3，0.32,1.32,0.22，0.54,0.65); -ms-transform:matrix(1.3，0.32,1.32,0.22，0.54,0.65);    /* IE 9 */ -moz-transform:matrix(1.3，0.32,1.32,0.22，0.54,0.65);  /* Firefox */ -webkit-transform:matrix(1.3，0.32,1.32,0.22，0.54,0.65);  /* Safari and Chrome */ -o-transform:matrix(1.3，0.32,1.32,0.22，0.54,0.65);    /* Opera */ } 定義6個(gè)數(shù)的矩陣

6).2D過度到3D

div{ transform:rotate(1deg); -ms-transform:rotate(1deg);   /* IE 9 */ -moz-transform:rotate(1deg);   /* Firefox */ -webkit-transform:rotate(1deg); /* Safari 和 Chrome */ -o-transform:rotate(1deg);       /* Opera */ }  它包含了所有的2D方法和3D方法，并且可以單個(gè)設(shè)置每一種的方法的x,y軸轉(zhuǎn)向值，比如： rotate(angle) 定義 2D 旋轉(zhuǎn)，在參數(shù)中規(guī)定角度。測試 rotate3d(x,y,z,angle) 定義 3D 旋轉(zhuǎn) rotateX(angle) 定義沿著 X 軸的 3D 旋轉(zhuǎn) rotateY(angle) 定義沿著 Y 軸的 3D 旋轉(zhuǎn) rotateZ(angle) 定義沿著 Z 軸的 3D 旋轉(zhuǎn) 其它的都是差不多的用法，不過還有一個(gè)用法不同的就是： perspective(n)     為3D轉(zhuǎn)換元素定義透視視圖。

“CSS樣式更改之2D轉(zhuǎn)換的方法有哪些”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

名稱欄目：CSS樣式更改之2D轉(zhuǎn)換的方法有哪些
網(wǎng)站網(wǎng)址：http://www.2m8n56k.cn/article46/pdieeg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營銷、商城網(wǎng)站、網(wǎng)站內(nèi)鏈、軟件開發(fā)、網(wǎng)站制作、標(biāo)簽優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：[email protected]。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)