CSS樣式更改之2D轉(zhuǎn)換的方法有哪些

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

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過(guò)度到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ī)定角度。測(cè)試 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) 其它的都是差不多的用法，不過(guò)還有一個(gè)用法不同的就是： perspective(n)     為3D轉(zhuǎn)換元素定義透視視圖。

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