本文介绍了如何在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中旋转背景图像?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!