如何只旋轉背景180度，（不旋轉字體）

這是我的代碼：如何只旋轉背景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度，

但，我不想字體旋轉，

我該怎麼辦。

謝謝

來源

2010-08-05 zjm1126

爲什麼要旋轉它呢？用相反的方式描述你的梯度：

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

來源

2010-08-05 18:04:51 robertc

時的背景是一個形象，我能做些什麼.thanks – zjm1126 2010-08-07 01:57:25

@ zjm1126用戶可以自己翻轉背景圖像，或將文本在包裝元素，方向相反的旋轉它到'背景'元素。 – robertc 2010-08-07 19:40:55

你不給任何解決方案？！圖像旋轉沒有背景顏色... – 2011-08-11 23:43:07

不幸的是，現在還沒有解決方案！您可以旋轉整個塊（包含內容，字體和背景）或者不旋轉它。對不起！

你可以找到關於這兩個網站的文檔：

的後一個提供了一個「把戲」的解決方案，也許可以幫助，創造一個「假」塊包含你的背景。

#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源）

來源

2012-10-01 18:22:39 Corinne

如何只旋轉背景180度，（不旋轉字體）

回答

相關問題