css - 如何在不旋转 div 的情况下保持对 Angular 线运行的背景动画？

Question

我创建了一个背景图像从左向右移动的动画。我希望这个动画是对 Angular 线的，所以我使用以下方法将 div 旋转了 45 度:-webkit-transform: rotate(45deg);

The result looks like this fiddle

如您所见，div 已旋转(红色边框)，但我希望 div 不旋转。那么如何在不旋转 div 的情况下保持对 Angular 线动画呢？

谢谢

1. ps 出于演示目的，我只使用了 -webkit- 前缀
2. ps2 我只能用css修改一个div，所以添加另一个div是不可能

Answer 1

你可以使用伪元素来完成你想要的:

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

看看这个很棒的 article克雷格·巴克勒 (Craig Buckler) 以获取更多信息。