在网页设计中怎么用css旋转图片？旋转图片代码分享！

2021-06-01 16:01:09 浏览数 (4765)

在 html 学习中，我们是不是发现在网页中搭配 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 参考手册中进行学习和了解。