CSS 如何旋转容器中的背景图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5087420/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to rotate the background image in the container?
提问by priya
I want to rotate the image which is placed in the button of scrollbar in Chrome. Now I have a CSS with this content:
我想旋转放置在 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;
}
I wish to rotate the image without rotating its content.
我希望旋转图像而不旋转其内容。
回答by Anmol Saraf
Very well done and answered here - http://www.sitepoint.com/css3-transform-background-image/
做得很好并在这里回答 - 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);
}
回答by Martijn
Very easy method, you rotate one way, and the contents the other. Requires a square though
非常简单的方法，您以一种方式旋转，另一种方式旋转内容。虽然需要一个正方形
#element{
background : url('someImage.jpg');
}
#element:hover{
transform: rotate(-30deg);
}
#element:hover >*{
transform: rotate(30deg);
}
回答by user2129794
CSS:
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:
Javascript：
$(buttonElement).click(function () {
$(".arrow").toggleClass("reverse")
return false
})
$(buttonElement).hover(function () {
$(".arrow").addClass("rotate")
}, function() {
$(".arrow").removeClass("rotate")
})
PS: I've found this somewhere else but don't remember the source
PS：我在别处找到了这个，但不记得出处
回答by Simon Seddon
I was looking to do this also. I have a large tile (literally an image of a tile) image which I'd like to rotate by just roughly 15 degrees and have repeated. You can imagine the size of an image which would repeat seamlessly, rendering the 'image editing program' answer useless.
我也想这样做。我有一个大图块（字面意思是图块的图像）图像，我想将其旋转大约 15 度并重复。您可以想象无缝重复的图像的大小，从而使“图像编辑程序”的答案变得毫无用处。
My solution was give the un-rotated (just one copy :) tile image to psuedo :before element - oversize it - repeat it - set the container overflow to hidden - and rotate the generated :before element using css3 transforms. Bosh!
我的解决方案是将未旋转的（只有一个副本:) 平铺图像提供给伪 :before 元素 - 超大它 - 重复它 - 将容器溢出设置为隐藏 - 并使用 css3 转换旋转生成的 :before 元素。波什！
回答by Akash
Update 2020, May:
2020 年 5 月更新：
Setting position: absoluteand then transform: rotate(45deg)will provide a background:
设置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>Original Answer:
原答案：
In my case, the image size is not so large that I cannot have a rotated copy of it. So, the image has been rotated with photoshop. An alternative to photoshopfor rotating images is online tool too for rotating images. Once rotated, I'm working with the rotated-imagein the backgroundproperty.
在我的情况下，图像尺寸不是太大，以至于我无法旋转它的副本。因此，图像已旋转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;
}
Good Luck...
祝你好运...
