CSS（17）CSS 2D、3D 轉換

阿新 • • 發佈：2022-05-13

一、CSS3 轉換

通過 CSS3 轉換，我們能夠對元素進行移動、縮放、轉動、拉長或拉伸。

瀏覽器支援

Internet Explorer 10、以及 Opera 支援 transform 屬性。

註釋：Internet Explorer 9 需要字首 -ms-。

Chrome 和 Safari 需要字首 -webkit-。

二、2D 轉換

在本章中，您將學到如下 2D 轉換方法：

translate()
rotate()
scale()
skew()
matrix()

1、translate() 轉換：沿著 X 和 Y 軸移動元素。

通過 translate() 方法，元素從其當前位置移動，根據給定的 left（x 座標）和 top（y 座標）位置引數：

值 translate(50px,100px) 把元素從左側移動 50 畫素，從頂端移動 100 畫素。

    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() ：旋轉，在引數中規定角度。

通過 rotate() 方法，元素順時針旋轉給定的角度。允許負值，元素將逆時針旋轉。

值 rotate(30deg) 把元素順時針旋轉 30 度。

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

親自試一試

3、scale() ：縮放轉換，改變元素的寬度和高度。

通過 scale() 方法，元素的尺寸會增加或減少，根據給定的寬度（X 軸）和高度（Y 軸）引數：

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

親自試一試

值 scale(2,4) 把寬度轉換為原始尺寸的 2 倍，把高度轉換為原始高度的 4 倍。

4、skew() ：傾斜轉換，沿著 X 和 Y 軸。

通過 skew() 方法，元素翻轉給定的角度，根據給定的水平線（X 軸）和垂直線（Y 軸）引數：

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

親自試一試

值 skew(30deg,20deg) 圍繞 X 軸把元素翻轉 30 度，圍繞 Y 軸翻轉 20 度。

5、matrix() ：轉換，使用六個值的矩陣。

matrix() 方法把所有 2D 轉換方法組合在一起。

matrix() 方法需要六個引數，包含數學函式，允許您：旋轉、縮放、移動以及傾斜元素。

如：如何使用 matrix 方法將 div 元素旋轉 30 度：

    div
    {
    transform:matrix(0.866,0.5,-0.5,0.866,0,0);
    -ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0);        /* IE 9 */
    -moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0);    /* Firefox */
    -webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0);    /* Safari and Chrome */
    -o-transform:matrix(0.866,0.5,-0.5,0.866,0,0);        /* Opera */
    }

親自試一試

6、新的轉換屬性

下面的表格列出了所有的轉換屬性：

transform :
向元素應用 2D 或 3D 轉換。
transform-origin：
允許你改變被轉換元素的位置。

三、3D 轉換

CSS3 允許您使用 3D 轉換來對元素進行格式化。

3D 轉換方法：

rotateX()
rotateY()

1、rotateX() 方法

通過 rotateX() 方法，元素圍繞其 X 軸以給定的度數進行旋轉。

    div
    {
    transform: rotateX(120deg);
    -webkit-transform: rotateX(120deg);    /* Safari 和 Chrome */
    -moz-transform: rotateX(120deg);    /* Firefox */
    }

親自試一試

2、rotateY() 旋轉

通過 rotateY() 方法，元素圍繞其 Y 軸以給定的度數進行旋轉。

    div
    {
    transform: rotateY(130deg);
    -webkit-transform: rotateY(130deg);    /* Safari 和 Chrome */
    -moz-transform: rotateY(130deg);    /* Firefox */
    }

親自試一試

3、轉換屬性

下面的表格列出了所有的轉換屬性：CSS3

transform ：向元素應用 2D 或 3D 轉換。
transform-origin ：允許你改變被轉換元素的位置。
transform-style ：規定被巢狀元素如何在 3D 空間中顯示。
perspective ：規定 3D 元素的透視效果。
perspective-origin ：規定 3D 元素的底部位置。
backface-visibility ：定義元素在不面對螢幕時是否可見。

4、3D 轉換方法

matrix3d( n , n , n , n , n , n , n , n , n , n , n , n , n , n , n , n )
定義 3D 轉換，使用 16 個值的 4x4 矩陣。
translate3d( x , y , z )
定義 3D 轉化。
translateX( x )、translateY( y )、translateZ( z )
定義 3D 轉化，僅使用用於 X 、Y、Z軸的值。
scale3d( x , y , z )
定義 3D 縮放轉換。
scaleX( x )、scaleY( y )、scaleZ( z )
定義 3D 縮放轉換，通過給定一個 X 、Y、Z軸的值。
rotate3d( x , y , z , angle )
定義 3D 旋轉。
rotateX( angle )、rotateY( angle )、rotateZ( angle )
定義沿X 、Y、Z軸的 3D 旋轉。
perspective( n )
定義 3D 轉換元素的透視檢視。