我有一个看起来像这样的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？
您可以添加：之前包含背景（见的容器此了解更多信息）。
.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
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句