translate3d怎么用？translate3D()方法詳細(xì)介紹

更新時(shí)間:2021-11-02 來(lái)源:黑馬程序員瀏覽量:

在三維空間里，除了rotateX()、rotateY()和rotateZ()函數(shù)可以讓元素在三維空間中旋轉(zhuǎn)之外，還有一個(gè)rotate3d()函數(shù)。在3D空間，三個(gè)維度也就是三個(gè)坐標(biāo)，即長(zhǎng)、寬、高。軸的旋轉(zhuǎn)是圍繞一個(gè)[x，y，z]向量并經(jīng)過(guò)元素原點(diǎn)。其基本語(yǔ)法如下。

rotate3d(x, y, z, angle);

在上述語(yǔ)法格式中，各參數(shù)屬性值的取值說(shuō)明如下。

● x：代表橫向坐標(biāo)位移向量的長(zhǎng)度。

● y：代表縱向坐標(biāo)位移向量的長(zhǎng)度。

● z：代表Z 軸位移向量的長(zhǎng)度。此值不能是一個(gè)百分比值，否則將會(huì)視為無(wú)效值。

● angle：角度值，主要用來(lái)指定元素在3D空間旋轉(zhuǎn)的角度，如果其值為正，元素順時(shí)針旋轉(zhuǎn)，反之元素逆時(shí)針旋轉(zhuǎn)。

需要說(shuō)明的是，在CSS3中包含很多轉(zhuǎn)換的屬性，通過(guò)這些屬性可以設(shè)置不同的轉(zhuǎn)換效果，具體屬性如下：

**translate3D轉(zhuǎn)換的屬性**
屬性名稱	描述
transform	向元素應(yīng)用2D 或3D 轉(zhuǎn)換
transform-origin	允許改變被轉(zhuǎn)換元素的位置
transform-style	規(guī)定被嵌套元素如何在3D空間中顯示
perspective	規(guī)定3D元素的透視效果
perspective-origin	規(guī)定3D元素的底部位置
backface-visibility	定義元素在不面對(duì)屏幕時(shí)是否可

另外，CSS3中還包含很多轉(zhuǎn)換的方法，運(yùn)用這些方法可以實(shí)現(xiàn)不同的轉(zhuǎn)換效果，具體方法如下所示。

**translate3D轉(zhuǎn)換的方法**
方法名稱	描述
matrix3d(n, n, n, n, n, n, n, n, n, n, n, n, n, n, n, n)	定義3D轉(zhuǎn)換，使用16個(gè)值的4×4矩陳
translate3d(x, y, z)	定義3D轉(zhuǎn)換
translateX(x)	定義3D轉(zhuǎn)換，使用用于X軸的值
translateY(y)	定義3D轉(zhuǎn)換，使用用于y軸的值
translateZ(z)	定義3D轉(zhuǎn)換，使用用于Z軸的值
scale3d(x, y, z)	定義3D縮放轉(zhuǎn)換
scaleX(x)	定義3D縮放轉(zhuǎn)換，通過(guò)給定一個(gè)X軸的值
scaleY(y)	定義3D縮放轉(zhuǎn)換，通過(guò)給定一個(gè)Y軸的值
scaleZ(z)	定義3D縮放轉(zhuǎn)換，通過(guò)給定一個(gè)Z軸的值
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)
perspective(n)	定義3D轉(zhuǎn)換元素的透視試圖

下面，通過(guò)一個(gè)案例演示轉(zhuǎn)換的屬性和方法的使用，如下例所示。

<!Doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>translate3D（）方法</title>
        <style>
            div{
                width: 200px;
                height: 200px;
                margin: 50px auto;
                border: 5px solid #000;
                position: relative;

                perspective: 50000px;　　　　　/*規(guī)定 3D元素的透視效果*/
                -ms-perspective: 50000px;　　　　/* IE9瀏覽器兼容代碼 */
                -webkit-perspective: 50000px;　　/* Safari andChrome瀏覽器兼容代碼 */
                -moz-perspective: 50000px;　　　/*Firefox瀏覽器兼容代碼*/
                -o-perspective: 50000px;　　　　/*Opera瀏覽器兼容代碼*/

                transform-style: preserve-3d;　　　/*規(guī)定被嵌套元素如何在 3D空間中顯示*/
                -ms-transform-style: preserve-3d;　/* IE9瀏覽器兼容代碼 */
                -webkit-transform-style: preserve-3d;　　/*Safari andChrome瀏覽器兼容代碼 */
                -moz-transform-style: preserve-3d;　　　/*Firefox瀏覽器兼容代碼*/
                -o-transform-style: preserve-3d;　　　　/*Opera瀏覽器兼容代碼*/

                transition: all 1s ease 0s;　　　　　　　/*設(shè)置過(guò)渡效果*/
                -webkit-transition: all 1s ease 0s;　　　/*Safari andChrome瀏覽器兼容代碼*/
                -moz-transition: all 1s ease 0s;　　　　/*Firefox瀏覽器兼容代碼*/
                -o-transition: all 1s ease 0s;　　　　　/*Opera瀏覽器兼容代碼*/
    　       }

            div:hover{
                transform: rotateX(-90deg);　　　　　/* 設(shè)置旋轉(zhuǎn)角度*/
                -ms-transform: rotateX(-90deg);　　　　/* IE9瀏覽器兼容代碼 */
                -webkit-transform: rotateX(-90deg);　　/*Safari andChrome瀏覽器兼容代碼 */
                -moz-transform: rotateX(-90deg);　　　/*Firefox瀏覽器兼容代碼*/
                -o-transform: rotateX(-90deg);　　　　/*Opera瀏覽器兼容代碼*/
            }

            div img{
                position: absolute;
                top: 0;
                left: 0;
            }

            div img.no1{
                transform: translateZ(100px);　　　　　/* 設(shè)置旋轉(zhuǎn)軸*/
                -ms-transform: rotateZ(100px);　　　　/* IE9瀏覽器兼容代碼 */
                -webkit-transform: rotateZ(100px);　　　/*Safari andChrome瀏覽器兼容代碼 */
                -moz-transform: rotateZ(100px);　　　/*Firefox瀏覽器兼容代碼*/
                -o-transform: rotateZ(100px);　　　　　/*Opera瀏覽器兼容代碼*/
                z-index: 2;
            }

            div img.no2{
                transform: rotateX(90deg) translateZ(100px);            /* 設(shè)置旋轉(zhuǎn)軸和旋轉(zhuǎn)角度*/
                -ms-transform: rotateX(90deg) translateZ(100px);        /* IE9瀏覽器兼容代碼 */
                -webkit-transform: rotateX(90deg) translateZ(100px);        /*SafariandChrome瀏覽器兼容代碼 */
                -moz-transform: rotateX(90deg) translateZ(100px);       /*Firefox瀏覽器兼容代碼*/
                -o-transform: rotateX(90deg) translateZ(100px);         /*Opera瀏覽器兼容代碼*/
            }
        </style>

　</head>
<body>
　<div>
　   <img class="no1" src="../images/1.png" alt="1">
　   <img class="no2" src="../images/2.png" alt="2">
　</div>
</body>
</html>

在上面案例中，通過(guò)perspective屬性規(guī)定3D元素的透視效果，transform-style屬性規(guī)定元素在3D空間中的顯示方式，并且分別針對(duì)

和設(shè)置不同的旋轉(zhuǎn)軸和旋轉(zhuǎn)角度。

運(yùn)行例代碼，默認(rèn)效果如下圖所示。

1635843398250_旋轉(zhuǎn)默認(rèn)效果.jpg