如何在CSS中旋转背景图像？

Question

我有一个背景图片，其样式为north：

.north {
    background-image: url("./images/turtle-north.png");
    background-repeat: no-repeat;
    background-size: 50px 50px;
}

这是渲染网格的reactjs组件的一部分。使用此规则，图像显示良好。但是，当我尝试使用此规则旋转它时：

.rotate_ninety {
    -moz-transform: rotate(90deg) translateX(150px);
    -webkit-transform: rotate(90deg) translateX(150px);
    -o-transform: rotate(90deg) translateX(150px);
    -ms-transform: rotate(90deg) translateX(150px);
    transform: rotate(90deg) translateX(150px);
}

img被下推，即不再位于网格的左上角。如何旋转图像并保持该位置？

Answer 1

“ img被下推，即不再位于网格的左上角位置”

这是因为您正在使用translateX，如果您只想旋转图像，不要移动它，请仅使用transform: rotate：

* {
  padding: 0;
  margin: 0;
}

.rotate_ninety {
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

<img src="https://www.w3schools.com/angular/pic_angular.jpg" class="rotate_ninety">