App下載

在網(wǎng)頁(yè)設(shè)計(jì)中怎么用css旋轉(zhuǎn)圖片？旋轉(zhuǎn)圖片代碼分享！

猿友 2021-06-01 16:01:09 瀏覽數(shù) (4910)
反饋

在 html 學(xué)習(xí)中，我們是不是發(fā)現(xiàn)在網(wǎng)頁(yè)中搭配 CSS 和 Javascript 一起使用會(huì)有很驚人的效果呢？那么今天我們就來(lái)看看在網(wǎng)頁(yè)設(shè)計(jì)中怎么用 css 旋轉(zhuǎn)圖片？下面是一個(gè)旋轉(zhuǎn)圖片代碼分享！

步驟一：

新建一個(gè)文件之后我們開(kāi)始寫(xiě)入我們的一個(gè)圖片并且在圖片中設(shè)置圖片的寬高，代碼截圖如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>旋轉(zhuǎn)圖片設(shè)置</title>
	</head>
	<body>
		<div>
			<img src="img/row.png"style=" width=436px;height=436px;" />
		</div>
	</body>
</html>

未變換圖片

步驟二：

那么接下來(lái)我們來(lái)設(shè)置 css 樣式我們這邊使用的是內(nèi)聯(lián)式的一個(gè)方式，直接在頭部下使用?style?標(biāo)簽在里面加入樣式，代碼如下：

	<style>
			div{
				width: 436px;
				height: 436px;
				margin: 100px auto;
				position: relative;
			}
			div img{
				position: absolute;
                transition: all 2s;
			}
			div:hover img{
				transform: rotate(90deg);
			}
		</style>

轉(zhuǎn)換之后圖片

在代碼中我們主要使用到?position?中的?relative?和?absolute?屬性，而且在還使用到了?transition?和?transform?這兩個(gè)元素，?transition?這個(gè)元素主要是讓我們看到變化的一個(gè)過(guò)程，然而代碼中的“2s”表示過(guò)度的時(shí)間。而?transform?則是代表圖片的旋轉(zhuǎn)方向和角度。

總結(jié)：

在我們使用旋轉(zhuǎn)的時(shí)候如果要顯示旋轉(zhuǎn)的一個(gè)過(guò)渡的話我們可以使用?transition?這個(gè)元素可以更加直觀的看出變化的程度。更多的有關(guān)于CSS樣式的使用我們可以在CSS 參考手冊(cè)中進(jìn)行學(xué)習(xí)和了解。


HTML CSS 前端

0 人點(diǎn)贊