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

遗憾的是，现在还没有解决方案！您可以旋转整个块（包括内容，字体和背景），也可以不旋转它。遗憾！

您可以在以下两个网站上找到文档：

后者提供的“技巧”解决方案可能有所帮助，创建一个包含背景的“假”块。

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

如何只旋转背景180度，（不旋转字体）

2 个答案: