如何在容器中旋转背景图像？

Question

我想要旋转Chrome浏览器滚动条按钮中放置的图像。现在我有一个包含以下内容的CSS：

::-webkit-scrollbar-button:vertical:decrement {
    background-image: url(images/arrowup.png);
    -webkit-transform: rotate(120deg);
    -moz-transform: rotate(120deg);
    background-repeat: no-repeat;
    background-position: center;
    background-color: #ECEEEF;
    border-color: #999;
}

我希望旋转图片时不影响其中的内容。

- priya

---

我也想这样做。iCloud 上有类似的示例，可以看到保险库纹理如何动态旋转：https://www.icloud.com/ - Subcreation

看起来有点像视差效果。不过从代码中无法确定... - sheriffderek

我猜你可能不再需要答案，但也许其他人会感兴趣。 这里有一个教程链接，展示了如何实现：http://www.sitepoint.com/css3-transform-background-image/ - Ayoub M.

很遗憾，所有提供的解决方案都无法在滚动条中工作。最终我创建了4张单独的图片。 - amoebe

参见：使用CSS3旋转背景图像 - unor

Answer 1

非常出色的回答，可以在这里找到答案 - http://www.sitepoint.com/css3-transform-background-image/

#myelement:before {
    content: "";
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    z-index: -1;
    background: url(background.png) 0 0 repeat;
    transform: rotate(30deg);
}

- Anmol Saraf

---

顺便提一下，容器围绕其中心点旋转，如果你在获得所需变换方面遇到了问题。 - Nick Larsen

FYI，它并不适用于所有元素；例如，select不能有:before。 - Yann Dìnendal

此外，请注意，200% 在某些情况下可能不足够，例如在长方形元素上，如 10px × 200px。 - Henrik Christensen

是的，但这并不是在旋转背景。这只是用近似方法来模拟它。如果你实际上需要背景旋转，这将无济于事。 - dev_willis

Answer 2

非常简单的方法，您将一个方向旋转，内容则向另一个方向旋转。但需要使用一个正方形。

#element{
    background : url('someImage.jpg');
}
#element:hover{
    transform: rotate(-30deg);
}
#element:hover >*{
    transform: rotate(30deg);
}

- Martijn

Answer 3

2020年5月更新：

将position: absolute和transform: rotate(45deg)设置在一起可以提供一个背景：

div {
  height: 200px;
  width: 200px;
  outline: 2px dashed slateBlue;
  overflow: hidden;
}
div img {
  position: absolute;
  transform: rotate(45deg);
  z-index: -1;
  top: 40px;
  left: 40px;
}

<div>
  <img src="https://placekitten.com/120/120" />
  <h1>Hello World!</h1>
</div>

Translated Answer:

在我的情况下，图像大小并不是很大，因此我可以拥有旋转后的副本。 因此，使用 photoshop 进行了图像旋转。 旋转图像的替代方法是使用在线工具来旋转图像。 旋转后，我使用 background 属性中的 rotated-image 进行处理。

div.with-background {
    background-image: url(/img/rotated-image.png);
    background-size:     contain;
    background-repeat:   no-repeat;
    background-position: top center;
}

祝你好运...

- Aakash

Answer 4

CSS:

.reverse {
  transform: rotate(180deg);
}

.rotate {
  animation-duration: .5s;
  animation-iteration-count: 1;
  animation-name: yoyo;
  animation-timing-function: linear;
}

@keyframes yoyo {
  from { transform: rotate(  0deg); }
  to   { transform: rotate(360deg); }
}

Javascript:

$(buttonElement).click(function () {
  $(".arrow").toggleClass("reverse")

  return false
})

$(buttonElement).hover(function () {
  $(".arrow").addClass("rotate")
}, function() {
  $(".arrow").removeClass("rotate")
})

PS：我在别处找到了这个，但是不记得来源了

- user2129794

Answer 5

我也想这样做。我有一张很大的瓷砖图像（实际上是一张瓷砖的图像），希望将其大致旋转15度并重复。你可以想象一个可以无缝重复渲染的图像大小，使“图像编辑程序”的答案变得无用。

我的解决方案是给未旋转（只有一份:)）的瓷砖图像提供伪元素:before，使其超过尺寸重复 - 将容器溢出设置为隐藏 - 并使用css3变换旋转生成的:before元素。搞定了！

- Simon Seddon

---

我无法想象一个能够无缝重复的图像有多大... - sheriffderek

如果您想让基础背景图像倾斜怎么办？ - Jason

Answer 6

我尝试了所有的解决方案，但都没有帮助。以下是我的问题及其解决方法：

问题：我们有一张横向定位的桌面图片，但需要在移动屏幕上显示相同的图片但旋转（纵向）。

解决方法：我只需将实际图像在我的资源文件夹中旋转到我想要的方式（纵向），然后只需使用媒体查询调用该图像作为移动设备的背景即可。

（这是我做过的最简单和快速的解决方案。）

- Usman Amin

Answer 7

尝试为图像创建一个仅包含图像的 div，然后使用 transform: scaleY(-1); 或 transform: scaleX(-1); 翻转它。 如果你想把导航条放在图像前面，可以创建一个重叠的 div，并将其不透明度属性设置为 0。

- user16793777

Answer 8

2021年12月更新

由于原始问题是“..旋转背景图像..”

最佳答案似乎在这里 https://stackoverflow.com/a/62135576/3446280

- Robert