如何在CSS中旋转背景图像？ [英] How to rotate background-image in css?

问题描述

我有一个背景图片，其样式为north：

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

这是渲染网格的reactjs组件的一部分。使用此规则，图像显示良好。但是，当我尝试使用此规则旋转它时：

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

img被下推，即不再位于网格的左上方。如何旋转图像并保持该位置？

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?

推荐答案

img被向下推，即不在顶部不再在网格中的左侧位置。

这是因为您要使用 translateX 仅旋转图像，不移动图像，仅使用 transform：旋转：

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

这篇关于如何在CSS中旋转背景图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！