最近在做愚人節的活動編寫了一個導航組件，如下兩個頁面共用同一導航組件：
如上第一個導航按鈕和最後一個圖片資源只給一半 另一半是旋轉實現的，最後一個不僅旋轉了按鈕還旋轉了文字
實際測試網頁正常，手機android正常，到ios 上第二個頁面上的最後一個導航按鈕：幸運獎池未選中狀態消失，點擊選中狀態會出現：
雖然最後一個導航按鈕均是應用了transform:rotate，但是以上只有第二個頁面的最後一個導航按鈕未選中狀態旋轉後消失
問題：排查transform:rotate影響的（旋轉原點z=0距離問題）
解決：父元素上設置perspective，值>0即可，不要設置none、負值和0
perspective：
https://developer.mozilla.org/en-US/docs/Web/CSS/perspective
指定了觀察者與 z=0 平面的距離，使具有三維位置變換的元素產生透視效果。 z>0 的三維元素比正常大，而 z<0 時則比正常小，大小程度由該屬性的值決定。
當爲元素定義 perspective 屬性時，其子元素會獲得透視效果，而不是元素本身。
三維元素在觀察者後面的部分不會繪製出來，即 z 軸座標值大於 perspective 屬性值的部分。
默認情況下，消失點位於元素的中心，但是可以通過設置 perspective-origin 屬性來改變其位置。
當該屬性值不爲 0 和 none 時，會創建新的 層疊上下文。在這種情況下，容器內元素的層疊關係像是使用了 position: fixed 一樣。
值：
none：沒有應用 perspective 樣式時的默認值.
<length> 指定觀察者距離 z=0 平面的距離，爲元素及其內容應用透視變換。當值爲0或負值時，無透視變換。