how to only rotate the background 180 deg,(not rotate the font)

Question

this is my code:

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

the div rotate 180 deg , and the font is also rotate 180 deg,

but , i don't want the font rotate ,

what can i do .

thanks

Answer 1

unfortunately there's no existing solution yet! You either rotate the whole block (content, font and background included) or you don't rotate it. Sorry!

You can find documentation on these two websites:

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

The later one offers a 'trick' solution that maybe could help, creating a 'fake' block containing your background.

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

Answer 2

Why rotate it at all? Just describe your gradient the other way round:

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