CSS實(shí)現(xiàn)兩張照片翻牌效果的方法

在CSS中，我們可以使用transform屬性來(lái)實(shí)現(xiàn)兩張照片翻牌的效果，以下是一個(gè)簡(jiǎn)單的示例，展示了如何實(shí)現(xiàn)這一功能：

1、HTML結(jié)構(gòu)：我們需要一個(gè)包含兩張照片的容器和一個(gè)觸發(fā)翻牌的按鈕。

<div class="photo-container">
  <img class="photo" src="photo1.jpg" alt="Photo 1">
  <img class="photo" src="photo2.jpg" alt="Photo 2">
</div>
<button id="flip-button">翻牌</button>

2、CSS樣式：我們使用CSS來(lái)設(shè)置照片和容器的樣式，并添加翻牌效果。

.photo-container {
  position: relative;
  width: 300px;
  height: 200px;
}
.photo {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}
.photo:first-child {
  transform: rotateY(0);
}
.photo:last-child {
  transform: rotateY(180deg);
}

3、JavaScript邏輯：我們使用JavaScript來(lái)監(jiān)聽按鈕點(diǎn)擊事件，并切換照片。

document.getElementById('flip-button').addEventListener('click', function() {
  var photos = document.getElementsByClassName('photo');
  for (var i = 0; i < photos.length; i++) {
    photos[i].style.transform = 'rotateY(' + (i % 2 === 0 ? '0' : '180') + 'deg)';
  }
});

在這個(gè)示例中，我們使用了transform屬性來(lái)將照片在X軸上翻轉(zhuǎn)，通過(guò)監(jiān)聽按鈕點(diǎn)擊事件，我們切換了照片的狀態(tài)，從而實(shí)現(xiàn)翻牌效果，希望這個(gè)示例能幫助你實(shí)現(xiàn)所需的功能！