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

Posted 2023-05-07

技术标签:

【中文标题】如何旋转容器中的背景图片？【英文标题】：How to rotate the background image in the container? 【发布时间】：2011-07-02 12:37:30 【问题描述】：

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

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

【问题讨论】：

我也想这样做。在 iCloud 上有一个这样的例子——看看 Vault 纹理是如何动态旋转的：icloud.com 这看起来有点像视差。虽然无法从代码中真正看出...... 我想也许你不再需要和回答，但也许其他人会感兴趣。这是一个教程链接，展示了如何做到这一点：http://www.sitepoint.com/css3-transform-background-image/ 不幸的是，所有提供的解决方案都不适用于滚动条。我最终创建了 4 张单独的图片。另见：Rotating a background image with CSS3 【参考方案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);

【讨论】：

仅供参考，容器围绕其中心点旋转，以防您无法准确获得所需的转换。仅供参考，它不适用于所有元素；例如，select 不能有 :before。另外，请注意 200% 可能在所有情况下都不够用，例如在 10px × 200px 这样的长方形元素上。是的，但这不是旋转背景。这是用近似值伪造它。如果您确实需要旋转背景，这将无济于事。【参考方案2】：

非常简单的方法，您旋转一种方式，然后旋转另一种方式。不过需要一个正方形

#element
    background : url('someImage.jpg');

#element:hover
    transform: rotate(-30deg);

#element:hover >*
    transform: rotate(30deg);

【讨论】：

谢谢兄弟！最简单的答案通常是最好的【参考方案3】：

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 的替代方法是online tool too for rotating images。旋转后，我将使用 background 属性中的 rotated-image。

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

祝你好运……

【讨论】：

【参考方案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：我在其他地方找到了这个，但不记得出处

【讨论】：

【参考方案5】：

我也想这样做。我有一个大图块（字面上是图块的图像）图像，我想将其旋转大约 15 度并重复。您可以想象一个图像的大小会无缝重复，从而使“图像编辑程序”的答案变得毫无用处。

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

【讨论】：

我无法“想象可以无缝重复的图像的大小”非常大...... 如果你想让你的基础背景图片倾斜怎么办？【参考方案6】：

尝试只为图像制作一个 div，然后用transform: scaleY(-1); 或transform: scaleX(-1); 翻转它如果你想在图像前面有导航栏，你可以制作一个重叠的 div 并将其 opacity 属性设置为 0;

【讨论】：

【参考方案7】：