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

为什么要旋转它？只需以相反的方式描述你的梯度：

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