I have a div that looks something like this:
<p class=stepNode aria-disabled=true style=background: url(https://...jpg) 50% 50%;>
<p class=stepLabel>
<div> New Step</div>
</p>
</p>
I want to rotate the background image within the div 90 degrees counterclockwise (without rotating the entire container .stepNode. How can I do this using jQuery?
You can add a :before to a container which contains the background (See this for more information).
.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;
Then you make a css class that contains the rotate properties.
.transform:before {
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
transform: rotate(-30deg);
}
And via jquery, you can add the class:
$(.stepNode).addClass(transform);
Also, you can set a transition time, to add animation (put this in .stepNode:before)
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s
-o-transition: all 1s;
transition: all 1s;
Here is a working jsfiddle.
Edit: 90 degrees version: jsfiddle
