CSS塊重置後旋轉（變換）

我想使鼠標懸停在對象周圍旋轉的某些圖像，如果我在Y軸上執行此旋轉一切正常，但是當我這樣做的時候X軸一切都傾向於失敗，如下面的例子。CSS塊重置後旋轉（變換）

編輯：我使用的是Chrome瀏覽器，現在看起來更進一步，Internet Explorer甚至不顯示紅色的臉。

.card-container { 
 
    height: 150px; 
 
    perspective: 600; 
 
    position: relative; 
 
    width: 150px; 
 
} 
 
.card { 
 
    height: 100%; 
 
    position: absolute; 
 
    transform-style: preserve-3d; 
 
    transition: all 1s ease-in-out; 
 
    width: 100%; 
 
    background: green; 
 
} 
 
.card:hover { 
 
    transform: rotateX(180deg); 
 
} 
 
.card .side { 
 
    backface-visibility: hidden; 
 
    height: 100%; 
 
    position: absolute; 
 
    width: 100%; 
 
} 
 
.card .back { 
 
    transform: rotateX(180deg); 
 
    background: red; 
 
}

<div class="card-container"> 
 
    <div class="card"> 
 
    <div class="side"></div> 
 
    <div class="side back"></div> 
 
    </div> 
 
</div>

正確的版本（Y版）：

.card-container { 
 
    height: 150px; 
 
    perspective: 600; 
 
    position: relative; 
 
    width: 150px; 
 
} 
 
.card { 
 
    height: 100%; 
 
    position: absolute; 
 
    transform-style: preserve-3d; 
 
    transition: all 1s ease-in-out; 
 
    width: 100%; 
 
    background: green; 
 
} 
 
.card:hover { 
 
    transform: rotateY(180deg); 
 
} 
 
.card .side { 
 
    backface-visibility: hidden; 
 
    height: 100%; 
 
    position: absolute; 
 
    width: 100%; 
 
} 
 
.card .back { 
 
    transform: rotateY(180deg); 
 
    background: red; 
 
}

<div class="card-container"> 
 
    <div class="card"> 
 
    <div class="side"></div> 
 
    <div class="side back"></div> 
 
    </div> 
 
</div>

來源

2014-09-23 Azrael

這似乎是一個正確的旋轉沿x軸對我 – fcalderan 2014-09-23 10:08:51

動畫完成時，圖像重置爲綠色一側 – Azrael 2014-09-23 10:09:19

這是過渡的工作原理：如果您失去：懸停狀態，您將轉換到初始狀態 – fcalderan 2014-09-23 10:10:30

如果從.card .back刪除transform: rotateX(180deg);它正常工作還對Chrome的

.card-container { 
 
    height: 150px; 
 
    perspective: 600; 
 
    position: relative; 
 
    width: 150px; 
 
} 
 
.card { 
 
    height: 100%; 
 
    position: absolute; 
 
    transform-style: preserve-3d; 
 
    transition: all 1s ease-in-out; 
 
    width: 100%; 
 
    background: green; 
 
} 
 
.card:hover { 
 
    transform: rotateX(180deg); 
 
} 
 
.card .side { 
 
    backface-visibility: hidden; 
 
    height: 100%; 
 
    position: absolute; 
 
    width: 100%; 
 
} 
 
.card .back { 
 
    background: red; 
 
}

<div class="card-container"> 
 
    <div class="card"> 
 
    <div class="side"></div> 
 
    <div class="side back"></div> 
 
    </div> 
 
</div>

來源

2014-09-23 10:24:34 fcalderan

您的代碼會倒轉顏色，但我會爲此尋找解決方法，謝謝！一旦允許我這樣做，我會盡快將其標記爲一個awnser。 – Azrael 2014-09-23 10:26:58

CSS塊重置後旋轉（變換）

回答

相關問題