我想旋转放置在 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;
}
我希望旋转图像而不旋转其内容。
做得很好，在这里得到了回答——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);
}
非常简单的方法，你旋转一种方式，另一种方式旋转内容。虽然需要一个正方形
#element{
background : url('someImage.jpg');
}
#element:hover{
transform: rotate(-30deg);
}
#element:hover >*{
transform: rotate(30deg);
}
设置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;
}
祝你好运...
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：我在其他地方找到了这个，但不记得出处
我也想这样做。我有一个大图块（字面上是图块的图像）图像，我想将其旋转大约 15 度并重复。您可以想象一个图像的大小会无缝重复，从而使“图像编辑程序”的答案变得毫无用处。
我的解决方案是将未旋转的（只有一个副本:) 平铺图像提供给 psuedo :before 元素 - 超大它 - 重复它 - 将容器溢出设置为隐藏 - 并使用 css3 转换旋转生成的 :before 元素。波什！
尝试只为图像制作一个 div，然后用它翻转它， transform: scaleY(-1);或者transform: scaleX(-1);
如果你想让导航栏在图像前面，你可以制作一个重叠的 div 并将其 opacity 属性设置为 0；
我尝试了所有解决方案，但没有任何帮助，以下是我的问题以及我如何解决它：
问题：我们有一个横向的桌面图像，但是为了显示相同的图像但旋转（纵向）移动屏幕。
如何：我只是按照我想要的方式（纵向）旋转了我的资产文件夹中的实际图像，然后只是使用媒体查询来调用该图像作为我的手机背景，仅此而已。
（这是我做过的最简单快捷的解决方案。）