CSS中有一个非常有趣的功能——图片旋转，如果你想让一个图片显示出不同的角度，可以很轻松地使用CSS来实现。当然，一般情况下我们想让字体不变，只有图片旋转的效果，下面就来介绍一下如何实现。

.rotate {
transform: rotate(45deg);
transform-origin: center;
}

上面的代码中，我们定义了一个class名为“rotate”，并且使用了“transform”属性来实现图片旋转的效果，其中“rotate(45deg)”表示要旋转的角度为45度，你可以根据需要自行调整。而“transform-origin: center;”则表示该元素旋转中心点的位置为正中心。

这样我们就实现了图片的旋转效果，但是，如果你发现同时将图片和文字放在同一个元素中时，文字也一起跟着旋转，这是我们不想看到的。那么如何实现图片旋转字体不变呢？接下来的代码就可以帮助你实现这一效果：

.rotate {
position: relative;
display: inline-block;
}
.rotate img {
position: absolute;
top: 0;
left: 0;
transform: rotate(45deg);
transform-origin: center;
}

上面的代码中，我们将元素的“position”属性设为“relative”，并且为图片设置了“position: absolute;”，这意味着图片相对于后代元素来定位，如同上面的代码一样。因为我们已经设置了“position: absolute;”，所以我们可以通过调整图片的位置来避免旋转对其他元素的影响。

此时，字体就不会随着图片的旋转而旋转，而是保持原来的位置不变。这样，我们就可以实现图片旋转字体不变的效果了。希望这篇文章对你有所帮助！