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

＆＃34; img被推下，即不再位于网格中的左上角位置＆＃34;

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

＆＃13;

* {
  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);
}

＆＃13;

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

＆＃13;

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

1 个答案: