在 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 参考手册中进行学习和了解。
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
