Question

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 complete example in jsfiddle also here
http://jsfiddle.net/jamna/9pH6s/7/

Answer 1

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>