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

更新時間:2021-11-02 來源:黑馬程序員瀏覽量:

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

rotate3d(x, y, z, angle);

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

● x：代表橫向坐標位移向量的長度。

● y：代表縱向坐標位移向量的長度。

● z：代表Z 軸位移向量的長度。此值不能是一個百分比值，否則將會視為無效值。

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

需要說明的是，在CSS3中包含很多轉(zhuǎn)換的屬性，通過這些屬性可以設(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	定義元素在不面對屏幕時是否可

另外，CSS3中還包含很多轉(zhuǎn)換的方法，運用這些方法可以實現(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個值的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)換，通過給定一個X軸的值
scaleY(y)	定義3D縮放轉(zhuǎn)換，通過給定一個Y軸的值
scaleZ(z)	定義3D縮放轉(zhuǎn)換，通過給定一個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)換元素的透視試圖

下面，通過一個案例演示轉(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è)置過渡效果*/
                -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>

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

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

運行例代碼，默認效果如下圖所示。

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