本文目錄導(dǎo)讀：

1. 圖片翻轉(zhuǎn)
2. 圖片旋轉(zhuǎn)

CSS實(shí)現(xiàn)圖片動(dòng)態(tài)效果：翻轉(zhuǎn)與旋轉(zhuǎn)

在現(xiàn)代網(wǎng)頁(yè)設(shè)計(jì)中，利用CSS（層疊樣式表）實(shí)現(xiàn)圖片的動(dòng)態(tài)效果，如翻轉(zhuǎn)和旋轉(zhuǎn)，已經(jīng)成為了一種常見(jiàn)的技巧，這種技術(shù)不僅可以提升網(wǎng)頁(yè)的視覺(jué)效果，還能為用戶(hù)帶來(lái)豐富的交互體驗(yàn)，本文將介紹如何使用CSS實(shí)現(xiàn)圖片的翻轉(zhuǎn)和旋轉(zhuǎn)效果。

圖片翻轉(zhuǎn)

在CSS中，我們可以使用transform屬性來(lái)實(shí)現(xiàn)圖片的翻轉(zhuǎn)，這個(gè)屬性允許你對(duì)元素進(jìn)行2D或3D轉(zhuǎn)換，對(duì)于2D翻轉(zhuǎn)，我們可以使用flip函數(shù)。

1、水平翻轉(zhuǎn)：

img {
  transform: scaleX(-1);
}

2、垂直翻轉(zhuǎn)：

img {
  transform: scaleY(-1);
}

你也可以使用transform: flip()來(lái)實(shí)現(xiàn)水平和垂直的雙向翻轉(zhuǎn)，只需將圖片元素的寬度和高度設(shè)為容器的一半即可。

圖片旋轉(zhuǎn)

圖片的旋轉(zhuǎn)可以通過(guò)CSS的rotate函數(shù)實(shí)現(xiàn)。

1、旋轉(zhuǎn)90度：

img {
  transform: rotate(90deg);
}

2、旋轉(zhuǎn)任意角度：你可以根據(jù)需要旋轉(zhuǎn)任意角度，例如旋轉(zhuǎn)45度：

img {
  transform: rotate(45deg);
}

你還可以結(jié)合使用transition屬性來(lái)實(shí)現(xiàn)旋轉(zhuǎn)的平滑過(guò)渡效果。

img {
  transition: transform 2s ease-in-out; /* 動(dòng)畫(huà)效果 */
  animation: rotation 5s infinite linear; /* 持續(xù)旋轉(zhuǎn)的動(dòng)畫(huà) */
}

通過(guò)CSS的transform屬性，我們可以輕松實(shí)現(xiàn)圖片的翻轉(zhuǎn)和旋轉(zhuǎn)效果，這些技巧不僅可以提升網(wǎng)頁(yè)的視覺(jué)效果，也能增強(qiáng)用戶(hù)的交互體驗(yàn)，在實(shí)際應(yīng)用中，你可以根據(jù)需求調(diào)整翻轉(zhuǎn)和旋轉(zhuǎn)的角度，以及動(dòng)畫(huà)的時(shí)間和效果。