z-index爲什麼會受到變換的影響？

所以我有一個圖標，當你點擊卡片時你可以翻轉。該圖標是卡div的一個元素。z-index爲什麼會受到變換的影響？

他們有相同的動畫當他們翻轉（見下面的代碼）。

在fiddle左邊的卡片有一個transformY，當你點擊它時，右邊的卡片根本沒有變形。出於展示目的，我將動畫的持續時間和轉換設置爲2秒，以便您可以看到左側卡片中出現了什麼問題。當您將它與正確卡中的圖標進行比較時，z-index是完全不同的。

我很樂意聽到你們的聲音爲什麼這種情況正在發生，我很想聽聽我應該如何使它正常工作。謝謝！

/* FRONTFLIP */ 

@-webkit-keyframes frontFlip { 
    0% { 
    z-index: -1; 
    -webkit-transform: translate(-50%, -25%) rotateX(-180deg); 
    transform: translate(-50%, -25%) rotateX(-180deg); 
    } 
    50% { 
    -webkit-transform: translate(-50%, -75%) rotateX(-270deg); 
    transform: translate(-50%, -75%) rotateX(-270deg); 
    } 
    100% { 
    z-index: 1; 
    -webkit-transform: translate(-50%, -50%) rotateX(-360deg); 
    transform: translate(-50%, -50%) rotateX(-360deg); 
    } 
} 


/* BACKFLIP */ 

@-webkit-keyframes backFlip { 
    0% { 
    z-index: 1; 
    -webkit-transform: translate(-50%, -50%) rotateX(-360deg); 
    transform: translate(-50%, -50%) rotateX(-360deg); 
    } 
    50% { 
    z-index: -1; 
    -webkit-transform: translate(-50%, -75%) rotateX(-270deg); 
    transform: translate(-50%, -75%) rotateX(-270deg); 
    } 
    100% { 
    z-index: -1; 
    -webkit-transform: translate(-50%, -25%) rotateX(-180deg); 
    transform: translate(-50%, -25%) rotateX(-180deg); 
    } 
}

來源

2016-09-07 Derk Jan Speelman

你可以在這裏清除你的概念.. http://zomigi.com/blog/css3-transitions-and-z-index/ – rmarif

這是因爲規範描述了一個變換不同的，則該值沒有應創建一個新stacking context

在MDN：

如果酒店有總比沒有不同的值，將創建一個堆疊上下文。在這種情況下，該對象將充當包含塊的位置：它包含的固定元素。

來源

2016-09-07 08:03:53

z-index爲什麼會受到變換的影響？

回答

相關問題