“变换：旋转” - 为什么我的背景图像也随着文本的旋转而移动？
我试图旋转背景图像上的文本，但我的背景图像也随着文本旋转而移动，为什么？在这里你可以看到我的作品
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/
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/
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
CSS
transform应用于元素，而不仅仅是元素的内容。因此你的背景是旋转的。如果您想旋转文本而不旋转背景，请在元素内添加额外的
，并将文本 + transform-CSS 放置在该元素内。建议更新：
CSS
transformis 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:
您旋转的跨度标签也包含您的背景图像。
旋转 - 旋转跨度（其中的所有内容。
百分之二十 - 这也包含您的背景图像。
Your rotating the span tag which is also holding your background image.
rotate - rotating the span(everything in it.
twenty-percent - this is also holding your background image.
我建议将 20% 包裹在另一个跨度内
20%并给它类.rotate。I would suggest to wrap 20% inside one more span
<span class="rotate">20%</span>and give class.rotateto it instead.您有两个类，但它们是相同的元素，因此当您旋转 .rotate 类时，您也会旋转该类 .20%，因为它们是相同的元素。
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.