css製做動畫

須要具有的相關知識

• css transform 座標軸空間
• transform相關屬性
• 使用建議

座標軸空間

二維空間

水平方向是x軸,右邊爲正方向；垂直方向爲y軸，向下是正方向；元素的左上角爲原
點。

三維空間

水平方向是x軸,右邊爲正方向；垂直方向爲y軸，向下是正方向；z軸指向查看者，
也就是你本身，指向你的方向爲正方向；元素的左上角爲原點。

transform相關屬性

1. translate

在座標軸上移動，使用方式參看css文檔屬性說明，效果加代碼(分別在x、y、z軸
上移動)以下：

@-webkit-keyframes translate-style {
    0% {
        transform: translateX(0);
    }
    33% {
        transform: translateX(50px);

    }
    66% {
        transform: translateY(50px);
    }
    99% {
        transform: translateZ(50px);
    }
    100% {
        transform: translateX(0px);
    }
}
.translate-style {
    -webkit-animation: translate-style 2s linear infinite;
}

2. skew

定義沿着 X 和 Y 軸的 2D 傾斜轉換,使用例子以下：

3. rotate

以座標軸爲軸進行旋轉，使用方式參看css文檔屬性說明，效果加代碼(分別
以x、y、z軸進行旋轉，旋轉的時候座標軸會總體跟着變化，z軸始終是垂直於
元素的)以下：

@-webkit-keyframes translate-style-x {
    0% {
        transform: rotateX(0);
    }
    25% {
        transform: rotateX(90deg);
    }
    50% {
        transform: rotateX(180deg);
    }
    75% {
        transform: rotateX(270deg);
    }
    100% {
        transform: rotateX(360deg);
    }
}
.translate-style-x {
    -webkit-animation: translate-style-x 2s linear infinite;
}

4. backface-visibility
指定當元素背向屏幕時，元素是否可見，有hidden和visible兩個屬性，默認屬性
是visible,以下對visible和hidden進行對比,注意藍色塊：

藍色塊代碼
.back {
    background-color: #2e78aa;
    width: 70px;
    height: 70px;
    transform: rotateY(180deg);
    backface-visibility: hidden;
}

5. transform-origin

設置旋轉元素的基點位置,默認值是50% 50% 0,默認值和其餘值對比：

實際計算流程以下：

![clipboard.png](/img/bVZc1R)

6. transform-style

使被轉換的子元素保留其 3D 轉換，值有flat、preserve-3d，默認是
flat也就是不保留,preserve-3d是保留其3d轉換，使用對好比下：

preserve-3d代碼以下：
```
.rotate-origin {
    background-color: #2e78aa;
    width: 70px;
    height: 70px;
    transform: rotateY(50deg);
    transform-origin: 20px 20px;
    transform-style: preserve-3d;
}
.rotate-origin-child {
    background-color: #ff686c;
    width: 80px;
    height: 80px;
    transform: rotateY(50deg);
}
```

7. perspective

設置元素被查看位置的視圖，實際看的圖描述以下：

用戶看到的元素縮放後的大小計算方式分沿着z軸正方向移動，仍是反方向移動，正方向，縮放後比例爲: d / (d-z),反之縮放比例爲d / (d+z)。

8. perspective-origin

設置 3D 元素的基點位置，就是改變用戶眼睛的位置，說明以下：

使用建議

1. 動畫元素儘可能用fixed、absolute定位方式，避免reflow
2. 此文檔後面持續更新

出一個題目

給定一個菱形圖片（圖案是菱形，可是切圖是長方形），點擊菱形區域出現彈窗，

如何實現（注意只能點擊菱形區域出現彈窗，其餘透明部分點擊不能跳出彈窗哦)