How to keep a diagonal running background animation without rotating the div? - css

Question

I have created an animation where a background image moves from left to the right. I want this animation to go diagonal so I've turned the div 45 degrees using: -webkit-transform: rotate(45deg);
The result looks like this fiddle
As you can see, the div is turned (red border), but I want the div not to rotate. So how can I keep the diagonal animation without rotating the div?
Thanks
ps for demo purposes I've only used the -webkit- prefix
ps2 I can only modify one div with the css, so adding another div is
not possible

Answer 1

You can use pseudo elements to accomplish what you want:
html:
<div id='test'></div>
css:
#test:before
{
content: "";
position: absolute;
width: 200%;
height: 200%;
top: -50%;
left: -50%;
z-index: -1;
background: url(background.png) 0 0 repeat;
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
background-image: url("http://www.easyvectors.com/assets/images/vectors/afbig/green-left-double-arrows-set-clip-art.jpg");
background-repeat: repeat;
-moz-animation: swim 2s linear 0s infinite;
-webkit-animation: swim 2s linear 0s infinite;
-webkit-transform: rotate(45deg);
}
#test {
position: relative;
overflow: hidden;
width: 300px;
height:300px;
border: 3px solid red;
}
#-webkit-keyframes swim {
from { background-position: 200% 0, 0 0; }
to { background-position: 100% 0, 0 0; }
}
Fiddle
Check out this great article by Craig Buckler for more information.