"transform: rotate" -why my background images is also moving with rotation of text?

I am trying to rotate text on a background-image but my background image is also moving with text rotation why? here you can see my work

HTML code is here

<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 work is here

.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}

you can see com开发者_运维技巧plete example in jsfiddle also here http://jsfiddle.net/jamna/9pH6s/7/

CSS transform is applied to an element, not just on the element's contents. Hence your rotated background.

If you want to rotate text without rotating the background, add an extra <div> inside your element, and place the text + transform-CSS within that element.

Suggested update:

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

Your rotating the span tag which is also holding your background image.

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

rotate - rotating the span(everything in it.

twenty-percent - this is also holding your background image.

I would suggest to wrap 20% inside one more span <span class="rotate">20%</span> and give class .rotate to it instead.

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

You have two classes, but they are the same element, so when you rotate your .rotate class you are also rotating the class .twenty-percent as they are the same element.