App下載

CSS如何設(shè)置圖片旋轉(zhuǎn)？

猿友 2021-03-19 16:11:34 瀏覽數(shù) (6554)
反饋

我們?yōu)g覽網(wǎng)頁時，希望網(wǎng)頁以動態(tài)狀態(tài)呈現(xiàn)，而不是簡單的靜態(tài)頁面，這有利于增強(qiáng)用戶體驗(yàn)。例如以頭像為例，我們會對它設(shè)置旋轉(zhuǎn)等效果。那么圖片的旋轉(zhuǎn)效果怎么做呢？這里 W3Cschool 小編教大家一種不需要用到 JavaScript，用 CSS 即可實(shí)現(xiàn)圖片旋轉(zhuǎn)效果。

先讓我們來看下實(shí)現(xiàn)效果：

CSS實(shí)現(xiàn)圖片旋轉(zhuǎ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°。以此代碼例子而言，圖片會折疊消失。

以上就是 CSS 如何設(shè)置圖片旋轉(zhuǎn)的全部內(nèi)容。更多 CSS 樣式請關(guān)注 W3Cschool 官網(wǎng)。

推薦課程：CSS教程


CSS

0 人點(diǎn)贊