Comment faire pivoter l'image d'arrière-plan dans css?

Question

J'ai une image de fond avec un style appelé au nord:

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

Cela fait partie d'un composant reactjs qui rend une grille. L'image s'affiche correctement avec cette règle. Cependant, lorsque je tente de tourner avec cette règle:

.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); 
} 

L'img est poussé vers le bas-à-dire pas dans la partie supérieure gauche la position dans la grille plus. Comment puis-je faire pivoter l'image et conserver cette position?

Answer 1

« Le img est poussé vers le bas-à-dire pas à la position en haut à gauche dans la grille plus »

C'est parce que vous utilisez translateX, si vous voulez juste faire pivoter l'image, ne se déplacent pas , utilisez uniquement 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">