在 CSS 中旋转图像

在Web开发中，我们通常需要使用图像来装饰网页或者展示一些信息。而有时候，我们需要旋转一个图像来更好地适配网页布局。在CSS中，我们可以使用transform属性来实现旋转效果。

旋转角度

在CSS中，我们可以指定一个旋转角度来控制图像的旋转方向和角度。这个角度可以用度数（deg）、弧度（rad）、梯度（grad）等单位来指定。

/* 旋转90度 */
transform: rotate(90deg);

/* 旋转180度 */
transform: rotate(180deg);

/* 旋转45度 */
transform: rotate(45deg);

/* 旋转1圈 */
transform: rotate(1turn);

/* 旋转π/2弧度 */
transform: rotate(0.5turn);

旋转中心点

默认情况下，旋转的中心点是元素的中心点。这也是大多数情况下我们需要的效果。但是有时候，我们需要指定一个不同的中心点来实现更多的效果，比如围绕顶部或者底部旋转。

/* 指定中心点为右下角 */
transform-origin: right bottom;

/* 指定中心点为元素顶部 */
transform-origin: center top;

旋转方向

旋转有两个方向，一个是顺时针方向，一个是逆时针方向。默认情况下，旋转方向是顺时针。如果需要逆时针旋转，我们可以使用负数来指定旋转角度。

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

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

兼容性

旋转是CSS3的一个特性，所以在一些老旧的浏览器中可能会不支持。建议在使用旋转的时候，使用浏览器厂商的前缀来保证兼容性。

/* 使用webkit前缀来实现旋转 */
-webkit-transform: rotate(90deg);

/* 使用moz前缀来实现旋转 */
-moz-transform: rotate(90deg);

/* 使用o前缀来实现旋转 */
-o-transform: rotate(90deg);

/* 不带前缀的标准写法 */
transform: rotate(90deg);

以上就是在CSS中旋转图像的介绍，希望对你有所帮助。