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

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

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

rotate3d(x, y, z, angle);

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

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

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

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

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

需要說明的是，在CSS3中包含很多轉換的屬性，通過這些屬性可以設置不同的轉換效果，具體屬性如下：

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

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

**translate3D轉換的方法**
方法名稱	描述
matrix3d(n, n, n, n, n, n, n, n, n, n, n, n, n, n, n, n)	定義3D轉換，使用16個值的4×4矩陳
translate3d(x, y, z)	定義3D轉換
translateX(x)	定義3D轉換，使用用于X軸的值
translateY(y)	定義3D轉換，使用用于y軸的值
translateZ(z)	定義3D轉換，使用用于Z軸的值
scale3d(x, y, z)	定義3D縮放轉換
scaleX(x)	定義3D縮放轉換，通過給定一個X軸的值
scaleY(y)	定義3D縮放轉換，通過給定一個Y軸的值
scaleZ(z)	定義3D縮放轉換，通過給定一個Z軸的值
rotate3d(x,y,z,angle)	定義3D旋轉
rotateX(angle)	定義沿X軸的3D旋轉
rotateY(angle)	定義沿Y軸的3D旋轉
rotateZ(angle)	定義沿Z軸的3D旋轉
perspective(n)	定義3D轉換元素的透視試圖

下面，通過一個案例演示轉換的屬性和方法的使用，如下例所示。

<!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;　　　　　　　/*設置過渡效果*/
                -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);　　　　　/* 設置旋轉角度*/
                -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);　　　　　/* 設置旋轉軸*/
                -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);            /* 設置旋轉軸和旋轉角度*/
                -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空間中的顯示方式，并且分別針對

和設置不同的旋轉軸和旋轉角度。

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

1635843398250_旋轉默認效果.jpg