现在我想让鼠标放到这个图像元素上面的时候可以旋转这个图像，变换的过程可以用一个过渡的动画效果 ... 添加一个样式选择器 .. .image:hover ... 把这个 transform 还有 transform-origin 放到这个样式里面 ..

然后在这个 .image 样式里，用一个 transition ，添加一个过渡动画 .. 过渡的属性是 transform ，持续的时候可以设置成 1 秒 ..

transition: transform 1s;

因为我在这个页面上用了 Web 开发工具的 Ruler .. 所以鼠标放到这个图像元素的时候没有效果 .. 可以打开浏览器的开发者工具 .. 找到页面上显示的这个图像元素 ..

在右边的 Styles 面板里面，打开这个 .hov .. 勾选一下 :hover ... 这就相当于是鼠标放到这个图像的元素上 ..

你会看到一个动画效果 ..

我们可以切换 .image:hover 上的这个 transform 属性，重复的观察这个过渡动画 ..