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

我也希望这样做。我有一个大的瓷砖（字面上是瓷砖的图像）图像，我想旋转大约15度并重复。你可以想象一个可以无缝重复的图像大小，渲染图像编辑程序＆＃39;回答没用。

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

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：我在其他地方发现了这个，但不记得来源

Answer 5

在我的情况下，图像尺寸不是很大，无法旋转复制它。因此，图像已经用photoshop旋转了。 photoshop用于旋转图像的替代方法是online tool too for rotating images。旋转后，我将使用rotated-image属性中的background。

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

祝你好运...

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

5 个答案: