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

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

我希望在不旋转图像内容的情况下旋转图像。

509733 次浏览
小开

我也想这么做。我有一个大的瓷砖（字面意思是瓷砖的图像）图像，我想旋转大约15度，并重复。你可以想象图像的大小，它会无缝地重复，使“图像编辑程序”的答案毫无用处。

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

小开

做得非常好，在这里回答-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);
}
小开

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：我在别的地方找到了这个，但不记得来源了。

小开

非常简单的方法，你旋转一个方向，另一个方向的内容。不过需要一个正方形。

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

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>

原答案：

在我的例子中，图像大小不是很大，以至于我不能旋转它的副本。因此，图像已经以__0的__ABC旋转。用于旋转图像的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;
}

祝你好运。

小开

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

小开

2021年12月更新

因为最初的问题是 "；.。旋转背景图像."；

最好的答案似乎就在这里。 https：//stackoverflow.com/a/62135576/3446280

小开

我尝试了所有的解决方案，但没有任何帮助，下面是我的问题和我如何解决它：

问题：，我们有一个横向方向的桌面图像，但显示相同的图像，但为移动屏幕旋转（纵向）。

如何：，我只是按照我想要的方式（纵向）旋转我的资产文件夹中的实际图像，然后使用媒体查询调用该图像作为我的手机背景，仅此而已。

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


提交答案