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">