CSS 變形動畫 水平，垂直翻轉元素

CSS3的2D變形屬性，scale：用來縮放元素（放大和縮小），translate:在屏幕上移動元素（上下左右），rotate:按照一定角度旋轉元素（單位為度），skew:沿X和Y軸對元素進行斜切，matrix:允許以像素精度來控制變形效果。變形是在文檔外發生的。一個變形的元素不會影響它附近未變形元素的位置。

transform-origin:注意在CSS里，默認的變形原點是在正中心：元素X軸的50%和Y軸的50%處。這個和SVG默認的左上角是不同的。使用transform-origin,我們可以修改變形原點。第一個值是水平方向上的偏移量，第二個值是垂直方向上的偏移量。關鍵字代表方向的數值。如果使用長度，它們會相對元素左上角計算該點位置。

CSS3實現翻轉元素

.flipper {
    perspective: 400px;
    position: relative;
    width: 300px;
    height: 44px;
}

.flipper + .flipper {
    margin-top: 1em;
}

.flipper-object {
    position: absolute;
    width: 100%;
    height: 100%;
    transition: transform 1s;
    transform-style: preserve-3d;
}

.panel {
    display: flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    top: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    backface-visibility: hidden;
}

.flipper-vertical .back {
    transform: rotateX(180deg);
}

.flipper-horizontal .back {
    transform: rotateY(180deg);
}

.back {
    background-color: #CC3232;
}

.front {
    background-color: #739328;
}

.flipper:hover .flipper-vertical {
    transform: rotateX(180deg);
}

.flipper:hover .flipper-horizontal {
    transform: rotateY(180deg);
}

其中比較關鍵的元素是:transform-styles:preserve-3d;這告訴瀏覽器，當我們要為這個元素創造變形效果時，它的子元素也保持3D效果。perspective可以給元素設置透視（瀏覽器支持不好）。backface-visibility:hidden;這個屬性定義元素不面向元素時是否隱藏。默認隱藏元素，可以翻轉180度。hover時，元素翻轉180%。

transform3d這個屬性，可以在X,Y,Z軸上移動元素。

transform3d最大用處在於將面板移入移出屏幕，尤其是如“離屏”導航模式。