「變換：旋轉」 - 爲什麼我的背景圖像也隨着文字的旋轉而移動？

我想旋轉背景圖片上的文字，但我的背景圖片也隨文字旋轉而移動爲什麼？在這裏你可以看到我的工作「變換：旋轉」 - 爲什麼我的背景圖像也隨着文字的旋轉而移動？

HTML代碼是在這裏

<ul> 

<li> 
    <img src="http://lorempixum.com/200/200/food" /> 
    <h2>price is $20 only</h2> 
    <span class="twenty-percent rotate"/>20% </span> 
</li> 

</ul>

CSS工作是在這裏

.rotate { 

/* Safari */ 
-webkit-transform: rotate(-90deg); 

/* Firefox */ 
-moz-transform: rotate(-90deg); 

/* IE */ 
-ms-transform: rotate(-90deg); 

/* Opera */ 
-o-transform: rotate(-90deg); 

/* Internet Explorer */ 
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 

} 

li{position:relative;float:left;margin:15px;background:yellow;display:inline} 

.twenty-percent{ 
background:url(http://canadianneighborpharmacy.net/images/cnp/discount_20.png);position:absolute; right:-15px; top:-5px; width:45px; height:45px}

你可以的jsfiddle看到完整的例子也在這裏 http://jsfiddle.net/jamna/9pH6s/7/

來源

2011-09-26 Jamna

這就是變換的含義。 – SLaks

CSS transform僅適用於元素內容上的元素而非。因此你的旋轉背景。

如果要在不旋轉背景的情況下旋轉文本，請在元素內添加額外的<div>，並將文本+ transform-CSS置於該元素內。

建議更新：

<span class="twenty-percent"> 
    <div class="rotate"></div> 
    20% 
</span>

來源

2011-09-26 17:52:10

我認爲你的代碼是錯的 –

我確定我的代碼是可以的。你的代碼錯了：' ...'。 '/'不應該在那裏。 –

你的旋轉跨度標籤，該標籤還拿着你的背景圖像。

<span class="twenty-percent rotate"/>

旋轉 - 旋轉的跨度（一切都在它

百分之二十。 - 這也是抱着你的背景圖片

來源

2011-09-26 17:52:48

嘗試環繞另一個跨度，將背景圖像放在外側，並在內側放置文本。 –

你有兩個班，但它們是相同的元素，所以當你旋轉你的.rotate類，你也旋轉類.twenty％的，因爲它們是相同的元素。

來源

2011-09-26 17:53:55 adeneo

我會建議換一個更跨度<span class="rotate">20%</span>內20％，並給予.rotate類來代替它。

<span class="twenty-percent"/><span class="rotate">20%</span></span>

來源

2011-09-26 17:56:26

「變換：旋轉」 - 爲什麼我的背景圖像也隨着文字的旋轉而移動？

回答

相關問題