160

我想旋转放在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;
}

我希望旋转图像而不旋转其内容。

css background-image image-rotation

— 普里亚
source

1

我也想这样做。有一个在iCloud上发生这种情况的示例-查看文件库纹理如何动态旋转：icloud.com

— Subcreation 2012年

看起来有点像视差的东西虽然不能从代码中真正分辨出……

— sheriffderek

我想也许您不再需要和回答，但也许其他人会感兴趣。以下是显示该操作方法的教程的链接：http

— Ayoub M. 2012年

不幸的是，所有提供的解决方案都无法在滚动条中使用。我最终创建了4张单独的图片。

— amoebe 2015年

1

另请参阅：使用CSS3旋转背景图片

— 51

141

做得很好，并在这里回答-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);
}

— 安莫尔·萨拉夫（Anmol Saraf）
source

2

仅供参考，容器在绕其中心点旋转的情况下，以防您无法准确获得所需的变换。

— 尼克·拉森

仅供参考，它并不适用于所有要素；例如，select不能有:before。

— YannDìnendal

1

另外，请注意，在所有情况下，即在10px×200px之类的长方形元素上，200％可能还不够。

— 亨里克·克里斯滕森

4

是的，但这不会旋转背景。这是一个近似的伪造。如果您确实需要旋转背景，这将无济于事。

— dev_willis

22

非常简单的方法，您旋转一种方式，而内容另一种。需要一个正方形

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

— 马丁
source

1

多谢兄弟！最简单的答案通常是最好的

— 麦卢纳斯胎唇炎

7

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

— 用户名
source

5

我也想这样做。我有一个大的图块（实际上是图块的图像），我想仅旋转15度并重复一次。您可以想象图像的大小会无缝地重复，从而使“图像编辑程序”的答案无用。

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

— 西蒙·塞登
source

我无法“想象出可以无缝重复的图像尺寸”太大……

— sheriffderek

1

如果要倾斜基本背景图像怎么办？

— 杰森

4

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

祝好运...

— 阿卡什
source

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

2020年5月更新：

原始答案：