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

Question

我有一个风格被称为北方的背景图像：

.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

这是因为你使用translateX，如果你只想旋转的图像“的IMG没有在电网不再左上角位置，即被推下”，不要动它，只使用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">