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.
精彩评论