App下載

在網頁設計中怎么用css旋轉圖片？旋轉圖片代碼分享！

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

在 html 學習中，我們是不是發(fā)現在網頁中搭配 CSS 和 Javascript 一起使用會有很驚人的效果呢？那么今天我們就來看看在網頁設計中怎么用 css 旋轉圖片？下面是一個旋轉圖片代碼分享！

步驟一：

新建一個文件之后我們開始寫入我們的一個圖片并且在圖片中設置圖片的寬高，代碼截圖如下：

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

未變換圖片

步驟二：

那么接下來我們來設置 css 樣式我們這邊使用的是內聯式的一個方式，直接在頭部下使用?style?標簽在里面加入樣式，代碼如下：

	<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>

轉換之后圖片

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

總結：

在我們使用旋轉的時候如果要顯示旋轉的一個過渡的話我們可以使用?transition?這個元素可以更加直觀的看出變化的程度。更多的有關于CSS樣式的使用我們可以在CSS 參考手冊中進行學習和了解。


HTML CSS 前端

0 人點贊