如何只旋轉背景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)));