css翻牌效果在一些活動頁面使用的還是比較多的，目前網上大部分的方案都是使用 backface-visibility 等復雜且兼容性差的方案，本文介紹一種非常簡單的方案。以撲克牌的翻轉為例,如果事先准備好下面的兩張圖片
實現圖片的翻轉很簡單,沿Y軸翻轉180度的同時更換背景圖片即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
<style>
#card {
width: 470px;
height: 640px;
transition: 0.5s ease-in-out;
/* 撲克牌背面 */
background-image: url("front.png");
background-size: cover;
}
#card.card-flip {
transform: rotateY(180deg);
/* 撲克牌正面 */
background-image: url("back.png");
}
</style>
</head>
<body>
<div id="card"></div>
<script>
const card = document.querySelector("#card");
card.addEventListener("click", function () {
this.classList.toggle("card-flip");
});
</script>
</body>
</html>
但是直接翻轉180度，數字面呈現的是牌7沿Y軸的鏡像,如下圖所示
解決這個問題有個簡單的方案，我們准備圖片的時候直接准備鏡像后的圖片，這樣翻轉后就能正常展示了
其實還有一種更簡單的css處理方式,使用scaleX(-1) 同樣能實現沿Y軸的鏡像。
transform: rotateY(180deg) scaleX(-1);
效果如下
https://codesandbox.io/s/ecstatic-sanne-7w14c?file=/index.html
另外，如果圖片加載速度慢，建議做預加載。