如何仅将背景旋转 180 度，（不旋转字体）答案

【问题标题】：how to only rotate the background 180 deg,(not rotate the font)如何仅将背景旋转 180 度，（不旋转字体）
【发布时间】：2010-08-05 07:12:35
【问题描述】：

这是我的代码：

<style type='text/css'>
    div {
    width: 100px;
    height: 100px;
    text-align: center;
    font-size: 22px;
    background-image: -webkit-gradient(linear, left top, left bottom,
                    color-stop(0.40, #ff0),
                    color-stop(0.5, orange),
                    color-stop(0.60, rgb(255, 0, 0)));
    -webkit-transform: rotate(180deg)
}
</style>
    <div id="test">click me to play</div>

div旋转180度，字体也旋转180度，

但是，我不希望字体旋转，

我能做什么。

谢谢

【问题讨论】：

标签： background css rotation

【解决方案1】：

很遗憾，还没有现成的解决方案！您要么旋转整个块（包括内容、字体和背景），要么不旋转它。对不起！

您可以在这两个网站上找到文档：

后者提供了一个“技巧”解决方案，可能会有所帮助，创建一个包含您的背景的“假”块。

#myelement  
{  
position: relative;  
overflow: hidden;  
-webkit-transform: rotate(30deg);  
-moz-transform: rotate(30deg);  
-ms-transform: rotate(30deg);  
-o-transform: rotate(30deg);  
transform: rotate(30deg);  
}  
#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);  
}

（按站点来源）

【讨论】：

【解决方案2】：

为什么要旋转它？只需反过来描述你的渐变：

background-image: -webkit-gradient(linear, left bottom, left top,
                color-stop(0.40, #ff0),
                color-stop(0.5, orange),
                color-stop(0.60, rgb(255, 0, 0)));

【讨论】：

@zjm1126 要么自己反转背景图像，要么将文本放在包装元素中，然后将其旋转到“背景”元素的对面。
@jepser 你有什么问题？
最近几天这么多人反对这个答案，有谁想解释一下原因吗？