旋转背景图像的Div 90度使用JQuery

Rotate Background Image of Div 90 Degrees using JQuery

本文关键字：JQuery 90度 Div 背景 图像 旋转      更新时间：2023-09-26

我有一个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(更多信息参见此)。

.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;

然后创建一个包含rotate属性的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;

这是一个工作的jsfile。

编辑:90度版本:jsfiddle

为了实现这一点，您需要有两个div处于绝对位置。一个包含背景图像，另一个包含文本。

<div class="myRotate"></div>
<div class="myContent">
    <p class="stepNode" aria-disabled="true">
        <p class="stepLabel">
           <div> New Step</div>
        </p>
    </p>
</div>

接下来，你可以在任何你想要的元素上附加一个Jquery OnClick事件，以便背景旋转。

$(function(){
    $('.myContent').click(function(){
        $('.myRotate').css({'-webkit-transform' : 'rotate(-90deg)',
                     '-moz-transform' : 'rotate(-90deg)',
                     '-ms-transform' : 'rotate(-90deg)',
                     'transform' : 'rotate(-90deg)'});
    });
});

下面是一个工作示例

相关文章：