本篇内容介绍了“在网页设计中如何用css旋转图片”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

步骤一：

新建一个文件之后我们开始写入我们的一个图片并且在图片中设置图片的宽高，代码如下：

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>旋转图片设置</title></head><body><div><imgsrc="img/row.png"/></div></body></html>

步骤二：

那么接下来我们来设置 css 样式我们这边使用的是内联式的一个方式，直接在头部下使用style标签在里面加入样式，代码如下：

<style>div{width:436px;height:436px;margin:100pxauto;position:relative;}divimg{position:absolute;transition:all2s;}div:hoverimg{transform:rotate(90deg);}</style>

在代码中我们主要使用到position中的relative和absolute属性，而且在还使用到了transition和transform这两个元素，transition这个元素主要是让我们看到变化的一个过程，然而代码中的“2s”表示过度的时间。而transform则是代表图片的旋转方向和角度。

“在网页设计中如何用css旋转图片”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！