1
私は2つのdivを親で作成しようとしていますが、1つのdivは前面のクラスで、もう1つのdivは背面のクラスです。私は後ろのものを裏返して正面のものの下に置くようにしています。したがって、親を裏返しにすると背面に表示され、正面に戻ったときには、取り除かれたときに反転する3次元のカードが作成されます。しかし、背面が前面と重なっているところでは、正面または背面から見ても前面は見えます。私は背面の視認性を使用しようとしました：両者に隠されています。私の理解から、反転したときに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>