Question

我有一个看起来像这样的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执行此操作？

Answer 1

您可以在包含背景的容器中添加：之前（有关详情，请参阅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：之前）

-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s
-o-transition: all 1s;
transition: all 1s;

这是一个有效的jsfiddle。

编辑：90度版本：jsfiddle

Answer 2

为了达到这个目的，你需要有两个绝对定位的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)'});
    });
});

这是working example

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

2 个答案: