本篇内容介绍了“在网页设计中如何用css旋转图片”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
步骤一：
新建一个文件之后我们开始写入我们的一个图片并且在图片中设置图片的宽高，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>旋转图片设置</title>
</head>
<body>
<div>
<img src="img/row.png" />
</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则是代表图片的旋转方向和角度。
“在网页设计中如何用css旋转图片”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
