как только повернуть фон 180 градусов, (не поворачивают шрифт),

это - мой код:

<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 градусов,

но, я не хочу шрифт, вращаются,

что я могу сделать.

спасибо