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

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