在CSS中，我們可以使用transform屬性來實(shí)現(xiàn)圖片翻轉(zhuǎn)的效果，當(dāng)圖片被點(diǎn)擊時(shí)，我們可以利用JavaScript來觸發(fā)CSS中的transform屬性，從而實(shí)現(xiàn)圖片翻轉(zhuǎn)的動(dòng)畫效果。

我們需要在CSS中定義一個(gè)transform屬性來實(shí)現(xiàn)圖片翻轉(zhuǎn)：

.img-flip {
  transition: transform 0.5s ease-in-out;
}
.img-flip-horizontal {
  transform: scaleX(-1);
}
.img-flip-vertical {
  transform: scaleY(-1);
}

上面的CSS代碼定義了一個(gè)名為img-flip的類，這個(gè)類可以實(shí)現(xiàn)圖片翻轉(zhuǎn)的動(dòng)畫效果。img-flip-horizontal和img-flip-vertical類分別用于實(shí)現(xiàn)水平翻轉(zhuǎn)和垂直翻轉(zhuǎn)的效果。

我們需要在JavaScript中綁定點(diǎn)擊事件，并添加相應(yīng)的CSS類來實(shí)現(xiàn)圖片翻轉(zhuǎn)：

document.querySelector('img').addEventListener('click', function() {
  if (this.classList.contains('img-flip')) {
    this.classList.remove('img-flip');
  } else {
    this.classList.add('img-flip');
  }
});

上面的JavaScript代碼會(huì)綁定圖片元素的點(diǎn)擊事件，并在點(diǎn)擊時(shí)切換img-flip類的狀態(tài)，當(dāng)圖片已經(jīng)是翻轉(zhuǎn)狀態(tài)時(shí)，移除img-flip類可以恢復(fù)原始狀態(tài)；反之，添加img-flip類可以進(jìn)入翻轉(zhuǎn)狀態(tài)。

我們可以在HTML中使用圖片元素，并添加相應(yīng)的CSS類和JavaScript代碼：

<img class="img-flip" src="image.jpg">

通過上面的代碼，我們可以實(shí)現(xiàn)點(diǎn)擊時(shí)圖片翻轉(zhuǎn)的動(dòng)畫效果，希望這篇文章能幫助你實(shí)現(xiàn)所需的功能。