CSS樣式更改之2D轉換的方法有哪些

本篇內容介紹了“CSS樣式更改之2D轉換的方法有哪些”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

2D轉換
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).元素旋轉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(寬度倍數，高度倍數)

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).元素翻轉給定的角度 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).將前面所有方法進行組合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個數的矩陣

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方法，并且可以單個設置每一種的方法的x,y軸轉向值，比如： rotate(angle) 定義 2D 旋轉，在參數中規定角度。測試 rotate3d(x,y,z,angle) 定義 3D 旋轉 rotateX(angle) 定義沿著 X 軸的 3D 旋轉 rotateY(angle) 定義沿著 Y 軸的 3D 旋轉 rotateZ(angle) 定義沿著 Z 軸的 3D 旋轉 其它的都是差不多的用法，不過還有一個用法不同的就是： perspective(n)     為3D轉換元素定義透視視圖。

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