CSS卡翻轉問題

Question

我的 css 卡片翻轉代碼出現了一個奇怪的問題。 在我將鼠標從卡上移開之前，卡不會翻轉。 有誰知道為什么會這樣？

提前致謝。

http://www.whitehotstaging.com/cb/

Answer 1

你有 4 個狀態：

1. 不翻轉，不懸停（無CSS）
2. 不翻轉，懸停
3. 翻轉，不懸停
4. 翻轉，懸停

你的問題的原因是你的懸停類通過更具體來覆蓋你的翻轉類。

/* this covers state 2 & 4, and wins both */
.flipper:hover {  
    transform: rotateY(-20deg);
}

/* this covers state 3 & 4, but loses 4 to the rule above */
.flipped {
    transform: rotateY(180deg);
}

第一個選擇器更具體並獲勝。

您可以通過為“翻轉和懸停”state 添加更具體的選擇器來修復它，例如：

.flipped:hover {
    transform: rotateY(180deg);
}

或者您可以從第一條規則中排除 state 4 ：

.flipper:not(.flipped):hover {  
    transform: rotateY(-20deg);
}