CODEWITHSUNDEEP
htmlcss
bier hier
bier hier

Reputation: 22580

How to rotate background-image in css?

I have a background image with a style called north:

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

This is part of a reactjs component that renders a grid. The image displays fine with this rule. However when I try to rotate it with this rule:

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

The img is pushed down ie not at the top left position in the grid anymore. How can I rotate the image and keep this position?

Upvotes: 5

Views: 19195

Answers (1)

P.S.
P.S.

Reputation: 16392

"The img is pushed down ie not at the top left position in the grid anymore"

It's because you're using translateX, if you want just to rotate the image, don't move it, use only 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">

Upvotes: 7

Related Questions