<分区>
我有一个看起来像这样的 div:
<p class="stepNode" aria-disabled="true" style="background: url(https://...jpg) 50% 50%;">
<p class="stepLabel">
<div> New Step</div>
</p>
</p>
我想将 div 中的背景图像逆时针旋转 90 度(而不旋转整个容器“.stepNode”)。我如何使用 jQuery 执行此操作？
最佳答案
您可以将 :before 添加到包含背景的容器(有关更多信息，请参阅 this)。
.stepNode:before {
content: "";
position: absolute;
width: 200%;
height: 200%;
top: -50%;
left: -50%;
z-index: -1;
background: url(some-background-url-here) 40% 50% no-repeat;
然后创建一个包含旋转属性的 css 类。
.transform:before {
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
transform: rotate(-30deg);
}
并且通过 jquery，您可以添加类:
$(".stepNode").addClass("transform");
此外，您还可以设置过渡时间，以添加动画(将其放入.stepNode:before)
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s
-o-transition: all 1s;
transition: all 1s;
这是一个有效的 jsfiddle .
编辑:90 度版本:jsfiddle
关于javascript - 使用 JQuery 将 Div 的背景图像旋转 90 度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24842026/
相关文章：
javascript - ui-mask和$ parser/$ formatters在同一指令中不起作用
jquery - d3.js Treemap - 有没有办法指定显示首选项(排序)？
ruby-on-rails - 如何转义 yield 返回的值
javascript - 将 Three.js 的 Raycaster 限制在 HTML 的特定部分。避免偏移
javascript - 使用 querySelector() 获取最后一个 td 元素
javascript - 从javascript提高单选按钮CheckedChanged