1. CSS旋转图片的基本原理
CSS中的transform属性可以用来改变元素的形状、大小、位置等。其中，rotate函数可以实现元素的旋转。要实现90度旋转，可以使用rotate(90deg)。
2. 实现步骤
2.1 HTML结构
<img src="example.jpg" alt="示例图片">
2.2 CSS样式
接下来，我们需要为这个img标签添加一些CSS样式，使其可以旋转。
img {
width: 200px; /* 设置图片宽度 */
height: 200px; /* 设置图片高度 */
transition: transform 0.5s ease; /* 设置旋转动画效果 */
}
2.3 旋转图片
img {
transform: rotate(90deg); /* 90度旋转 */
}
2.4 添加交互
<img src="example.jpg" alt="示例图片" id="rotateImage">
#rotateImage {
cursor: pointer; /* 设置鼠标样式 */
}
#rotateImage:hover {
transform: rotate(90deg); /* 鼠标悬停时旋转 */
}
3. 代码示例
以下是完整的HTML和CSS代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS旋转图片示例</title>
<style>
img {
width: 200px;
height: 200px;
transition: transform 0.5s ease;
}
#rotateImage {
cursor: pointer;
}
#rotateImage:hover {
transform: rotate(90deg);
}
</style>
</head>
<body>
<img src="example.jpg" alt="示例图片" id="rotateImage">
</body>
</html>