backface-visibility
backface-visibility 属性定义当元素不面向屏幕时是否可见。
如果在旋转元素不希望看到其背面时，该属性很有用
元素旋转到背面后,这个背面是否课件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
body{
margin: 0;
padding: 0;
display: flex;
min-height: 100vh;
/* background-color: #ddd; */
justify-content: center;
align-items: center;
}
.card {
width: 100px;
height:100px;
position: relative;
}
.cover,.back {
width: 100px;
height:100px;
position: absolute;
background-color: #f9dca89e;
display: flex;
justify-content: center;
align-items: center;
backface-visibility: hidden;
transition: all 2s ease-out;
font-size: 80px;;
}
.cover {
transform: translateY(0deg);
}
.back{
transform: rotateY(-180deg);
}
.card:hover .cover{
transform: rotateY(180deg);
}
.card:hover .back{
transform: rotateY(0deg);
/* backface-visibility:visible; */
}
</style>
<body>
<div class="card">
<div class="cover">🤓</div>
<div class="back">🤩</div>
</div>
</body>
</html>
本文使用 mdnice 排版
