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

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

我想旋转图像而不旋转其内容.

Answer 1

做得很好,在这里回答 - http://www.sitepoint.com/css3-transform-b​​ackground-image/

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

Answer 2

非常简单的方法,你单向旋转,内容另一个.虽然需要一个正方形

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

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>

原答案：

在我的情况下，图像尺寸不是太大，以至于我无法旋转它的副本。因此，图像已旋转photoshop。photoshop旋转图像的替代方法也是用于旋转图像的在线工具。旋转一次，我与工作rotated-image的background性质。

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

祝你好运...

Answer 4

我也希望这样做.我有一个大的瓷砖(字面上是瓷砖的图像)图像,我想旋转大约15度并重复.你可以想象一个可以无缝重复的图像大小,使"图像编辑程序"的答案变得毫无用处.

我的解决方案是将未旋转的(只有一个副本)平铺图像提供给psuedo:在元素之前 - 超大它 - 重复它 - 将容器溢出设置为隐藏 - 并使用css3转换旋转生成的:before元素.波什!

Answer 5

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：我在其他地方找到了它，但不记得来源了