在网页设计中，图片的旋转是一种常见的操作，可以增加视觉效果和动态感。CSS提供了多种方法来实现图片的旋转，其中旋转90度是最常见的旋转角度之一。本文将详细介绍如何使用CSS轻松实现图片的90度旋转，并探讨不同的实现方法。
一、使用CSS的
transform: rotate()
属性
最简单的方法是使用CSS的
transform: rotate()
属性。这个属性可以让你轻松地旋转任何元素，包括图片。
1.1 基本语法
img {
transform: rotate(90deg);
}
1.2 示例代码
在上面的示例中，我们将图片旋转了90度。
二、使用
transform-origin
属性调整旋转中心
默认情况下，
transform
属性会以元素的中心为旋转中心。如果你想要改变旋转中心，可以使用
transform-origin
属性。
2.1 基本语法
img {
transform: rotate(90deg);
transform-origin: x% y%;
}
其中，
x%
和
y%
代表旋转中心的X和Y坐标。
2.2 示例代码
在这个示例中，我们将旋转中心调整到了图片的底部中央。
三、使用CSS动画实现旋转效果
如果你想要实现图片的动态旋转效果，可以使用CSS动画。
3.1 基本语法
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(90deg);
}
}
img {
animation: rotate 2s linear infinite;
}
3.2 示例代码
在这个示例中，图片将无限循环地旋转90度。
四、总结
通过以上几种方法，你可以轻松地使用CSS实现图片的90度旋转。在实际应用中，你可以根据自己的需求选择合适的方法。希望本文能帮助你更好地掌握CSS技巧。