一、旋转基本概念

在CSS中，transform属性可以用来实现元素的旋转、缩放、倾斜或平移等效果。其中，旋转是通过rotate函数来实现的。旋转可以围绕元素的中心点进行，也可以通过transform-origin属性来指定旋转的原点。

二、旋转属性

1. transform: rotate()

rotate函数接受一个角度值作为参数，表示元素旋转的角度。角度值为正数时表示顺时针旋转，为负数时表示逆时针旋转。

/* 顺时针旋转90度 */
img {
  transform: rotate(90deg);
}

/* 逆时针旋转90度 */
img {
  transform: rotate(-90deg);
}

2. transform-origin

transform-origin属性用于指定旋转的原点。默认情况下，旋转原点是元素的中心点。可以通过方位名词、像素单位数值或百分比来设置旋转原点。

/* 设置旋转原点为左上角 */
img {
  transform-origin: left top;
}

/* 设置旋转原点为元素宽度的一半和高度的一半 */
img {
  transform-origin: 50% 50%;
}

三、旋转动效实现

1. 鼠标悬停旋转

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>鼠标悬停旋转图片</title>
<style>
  img {
    width: 200px;
    transition: transform 0.5s ease;
  }

  img:hover {
    transform: rotate(360deg);
  }
</style>
</head>
<body>
<img src="example.jpg" alt="Example Image">
</body>
</html>

2. 滑动图片放大与旋转

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>滑动图片放大与旋转</title>
<style>
  img {
    width: 200px;
    transition: transform 0.5s ease;
  }

  img:hover {
    transform: scale(1.2) rotate(360deg);
  }
</style>
</head>
<body>
<img src="example.jpg" alt="Example Image">
</body>
</html>

四、总结