CSS3 Transform的rotate3d屬性實現元素3D旋轉效果

一、什麼是CSS3 Transform的rotate3d屬性

CSS3 Transform的rotate3d屬性是CSS3中的一種3D旋轉效果。其作用是將元素沿著x、y和/或z軸旋轉一定的角度。其中rotate3d屬性可以指定圍繞一個自定義軸旋轉元素。

在3D空間中，一個軸定義為一個三維向量(x,y,z)，通過rotate3d()函數定義，它是用四個參數(x,y,z,θ)來定義一個包含旋轉軸方向以及旋轉角度的向量。

    transform: rotate3d(1, 1, 1, 45deg);

上述代碼中，元素圍繞向量(1,1,1)旋轉45度，即在3D空間內按照45度旋轉了一個直角三角形所在的平面。

二、如何使用CSS3 Transform的rotate3d屬性實現側翻效果

實現元素側翻效果最常用的方法是使用CSS3中的rotateY屬性。但是如果需要實現更加自定義的3D旋轉效果，則可以使用rotate3d屬性。

下面是一個實現元素側翻效果的代碼示例：

    .flip-container {
        -webkit-perspective: 1000px;
        perspective: 1000px; 
    }
    .flipper {
        -webkit-transition: 0.6s;
        -webkit-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
        transform-style: preserve-3d;
        position: relative;
    }
    .flipper .front, .flipper .back {
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        position: absolute;
        top: 0;
        left: 0;
    }
    .flipper .front {
        z-index: 2;
    }
    .flipper .back {
        -webkit-transform: rotate3d(0, 1, 0, 180deg);
        transform: rotate3d(0, 1, 0, 180deg);
    }
    .flip-container:hover .flipper {
        -webkit-transform: rotate3d(0, 1, 0, 180deg);
        transform: rotate3d(0, 1, 0, 180deg);
    }

上述代碼中，首先給容器加上了透視，然後將 flipper 元素的 transform-style 設置為 preserve-3d，這樣才可以在3D空間內進行旋轉。接著使用 rotate3d() 函數來定義側翻時圍繞的自定義軸，這裡的軸是 (0, 1, 0)，表示沿著 Y 軸旋轉。最後當滑鼠 hover 到容器上時，觸發元素翻轉的效果。

三、如何使用CSS3 Transform的rotate3d屬性實現元素翻頁效果

實現元素翻頁效果也是CSS3中常用的動效之一，同樣可以使用rotate3d屬性來實現。下面是一個示例代碼：

    .flip {
        -webkit-perspective: 800px;
        perspective: 800px;
        position: relative;
        text-align: left;
        -webkit-transition: -webkit-transform 1s;
        transition: transform 1s;

    }
    .flip .front, .flip .back {
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        position: absolute;
        top: 0;
        left: 0;
    }
    .flip .front {
        z-index: 2;
    }
    .flip .back {
        -webkit-transform: rotate3d(0, 1, 0, 180deg);
        transform: rotate3d(0, 1, 0, 180deg);
    }
    .flip.animate .card {
        -webkit-transform: rotate3d(0, 1, 0, -180deg);
        transform: rotate3d(0, 1, 0, -180deg);
    }
    .flip.animate .back {
        -webkit-transform: rotate3d(0, 1, 0, 0deg);
        transform: rotate3d(0, 1, 0, 0deg);
    }

上述代碼中，我們使用了一個 flip 容器，front 和 back 元素以及添加了一個 animate 類作為動效的觸發器。通過給容器制定透視效果，我們可以讓 flip 和 back 在 3D 空間裡面進行旋轉。在 flip 元素中設置了過渡屬性，以及 flip.animate .card 和 flip.animate .back 這兩個選擇器來設置翻轉時的變化效果。

四、如何使用CSS3 Transform的rotate3d屬性實現元素翻翻效果

元素翻翻效果是一種比較特殊的3D旋轉效果，它可以讓元素在翻轉的同時進行另一種旋轉。下面是一個示例代碼：

    .flip {
        -webkit-perspective: 800px;
        perspective: 800px;
        position: relative;
        text-align: left;
        -webkit-transition: -webkit-transform 1s;
        transition: transform 1s;

    }
    .flip .front, .flip .back {
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        position: absolute;
        top: 0;
        left: 0;
    }
    .flip .front {
        z-index: 2;
    }
    .flip .back {
        -webkit-transform: rotate3d(0, 1, 0, 180deg);
        transform: rotate3d(0, 1, 0, 180deg);
    }
    .flip.animate .card {
        -webkit-transform: rotate3d(0, 1, 0, -180deg) rotate3d(1, 1, 1, 45deg);
        transform: rotate3d(0, 1, 0, -180deg) rotate3d(1, 1, 1, 45deg);
    }
    .flip.animate .back {
        -webkit-transform: rotate3d(0, 1, 0, 0deg) rotate3d(1, 1, 1, -45deg);
        transform: rotate3d(0, 1, 0, 0deg) rotate3d(1, 1, 1, -45deg);
    }

在上述代碼中，我們依然使用了 flip 容器， front 和 back 元素以及添加了一個 animate 類作為動效的觸發器。不同的是，這裡在設置rotate3d屬性的時候，我們傳遞了兩個參數，第一個參數是 (0, 1, 0, -180deg) 用來控制翻轉效果，第二個參數是 (1, 1, 1, 45deg) 用來控制「翻翻」效果。最終造成既翻轉又翻翻的3D效果。