<分区>
我有一个看起来像这样的 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 - 为什么我的退出进程在循环结束之前执行？
javascript - 为 AngularJs 服务的 ASP.NET MVC Controller 自动创建 "proxy"
html - 如何在不使用颜色属性的情况下更改文本的颜色？ (HTML 和 CSS)
javascript - d3.js - 如何正确排列 `squre` 周围的 `circle` 框
javascript - Vue.js 多个 v-on :click events
javascript - 如何在 jPlayer 中使用 .wav 音频文件
javascript - 在 Summernote 文本编辑器中拖放图像