如何只旋转背景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>

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

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

我能做什么 。

谢谢

Answer 1

遗憾的是还没有现有的解决方案！ 您可以旋转整个块（包括内容，字体和背景），也可以不旋转它。 抱歉!

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

• http://onwebdev.blogspot.com/2011/01/css3-background-rotate-property.html
• http://www.sitepoint.com/css3-transform-b​​ackground-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);  
}  

（来自sitepoint）

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