`Fiddle`

Question

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

The result looks like this fiddle

如你所见，div被转动（红色边框），但我希望div不要旋转。那么如何在不旋转div的情况下保持对角线动画呢？

由于

ps用于演示目的我只使用了-webkit-前缀
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`

查看Craig Buckler撰写的精彩article以获取更多信息。

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

1 个答案:

`Fiddle`