我們?yōu)g覽網(wǎng)頁(yè)時(shí)，希望網(wǎng)頁(yè)以動(dòng)態(tài)狀態(tài)呈現(xiàn)，而不是簡(jiǎn)單的靜態(tài)頁(yè)面，這有利于增強(qiáng)用戶體驗(yàn)。例如以頭像為例，我們會(huì)對(duì)它設(shè)置旋轉(zhuǎn)等效果。那么圖片的旋轉(zhuǎn)效果怎么做呢？這里 W3Cschool 小編教大家一種不需要用到 JavaScript，用 CSS 即可實(shí)現(xiàn)圖片旋轉(zhuǎn)效果。
先讓我們來(lái)看下實(shí)現(xiàn)效果：
具體代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS圖片旋轉(zhuǎn) - 編程獅(w3cschool.cn)</title>
<style type="text/css">
div img{
transition:all 1s;
}
div:hover img{
transform:rotateY(180deg);/*將圖片按Y軸180度旋轉(zhuǎn)*/
}
</style>
</head>
<body>
<div><img src="https://7n.w3cschool.cn/statics/img/logo/indexlogo@2x.png" alt="w3cschool"></div>
</body>
</html>transform：rotate 即實(shí)現(xiàn)旋轉(zhuǎn)效果，如果將上述參數(shù)改為（90deg），圖片只旋轉(zhuǎn) 90°。以此代碼例子而言，圖片會(huì)折疊消失。
以上就是 CSS 如何設(shè)置圖片旋轉(zhuǎn)的全部?jī)?nèi)容。更多 CSS 樣式請(qǐng)關(guān)注 W3Cschool 官網(wǎng)。
推薦課程：CSS教程
