我想創建兩個div,在父類中,一個div與一類正面,另一類背面。我試圖翻轉後面的一個,並將它放在前面,所以當我翻轉它的父母后面的一個顯示,並且當它的翻轉再次回到前面顯示的時候,創建一個三維卡片,當徘徊時翻轉。然而,無論背部與前部重疊,前部只有從前部或後部觀察時纔可見。我曾嘗試使用背面可見性:隱藏在兩者上,這從我的理解應該使翻轉後的div不可見,但是這導致背面完全消失,並且它對前面沒有影響。我知道這是可能的,因爲我看到有人這樣做,但是我在這裏做錯了什麼,我該如何解決這些問題?我該如何解決這個CSS卡片翻轉過渡?
https://fiddle.jshell.net/h8vz85b3/2/
<!DOCTYPE html>
<html>
<head>
<title> media test</title>
<meta charset="utf-8">
<meta name="keywords" content="test,css, css test">
<meta name="description" content="A CSS test and review.">
<meta name="author" content="brandon lind">
<link rel="stylesheet" media="screen" href="css/main.css">
<style>
.parent{
transition: transform 1s ease-in-out 0s;
width: 100px;
}
.parent:hover {
transform: rotateY(180deg);
}
.back,.front{
width: 100px;
height: 170px;
//backface-visibility: hidden;
}
.front{
background-color: blue;
transform: translate(0, -150px);
}
.back{
background-color: red;
transform: rotateY(190deg);
}
</style>
</head>
<body>
<div class="parent">
<div class="back">
back
</div>
<div class="front">
front
</div>
</div>
</body>
</html>