如何仅将背景旋转180度（而不是旋转字体）

Question

这是我的代码：

<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>

元素旋转180度，字体也旋转了180度，

但是，我不想让字体旋转，

我该怎么办呢？

谢谢。

- zjm1126

Answer 1

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

你可以在这两个网站上找到相关文档：

• http://onwebdev.blogspot.com/2011/01/css3-background-rotate-property.html
• http://www.sitepoint.com/css3-transform-background-image/

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

#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);  
}  

(source by sitepoint)

- Corinne

Answer 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)));

- robertc

---

@zjm1126 要么自己反转背景图像，要么将文本放入包装器元素中，并将其旋转与“background”元素相反的方向。 - robertc

@jepser 你有什么问题？ - robertc

这个答案在过去几天里被很多人踩了，他们中有没有人想解释一下为什么？ - robertc