CSS3 变换旋转嵌套的背景图像答案

【问题标题】：CSS3 transform rotate a nested background imageCSS3 变换旋转嵌套的背景图像
【发布时间】：2013-03-13 05:55:04
【问题描述】：

我有一个总共存在 3 张图像的背景。然而，中间的背景图像 (wrapper2) 在视觉上“介于”两个背景图像 （wrapper1 和 wrapper2） 之间。当我尝试旋转中间图像 (wrapper2) 时，最上面的图像 (wrapper3) 也会移动。

我怎样才能防止这种情况，以便只有中间的背景图像 (wrapper2) 可以旋转，而另一个 (wrapper3) 不能旋转？

<div id="wrapper1">
<div id="wrapper2">
<div id="wrapper3">
<!-- blabla -->
</div>
</div>
</div>

#wrapper1 {
        background-image: url("../media/bg1.png");
        background-size: 300px 200px;
        background-repeat: no-repeat;
}

#wrapper2 {
        background-image: url("../media/bg2.png");
        background-size: 300px 200px;
        background-repeat: no-repeat;
}

#wrapper3 {

        background-image: url("../media/bg3.png");
        background-size: 300px 200px;
        background-repeat: no-repeat;
}


#wrapper2:hover 
{
    animation: TestAnim;        
      animation-iteration-count:  infinite;     
    animation-duration: 10s; 
}

@keyframes TestAnim
{
 0% { transform:rotate(0deg); }
 25% { transform:rotate(-4deg); }
 100% { transform:rotate(0deg); }
 }
}

【问题讨论】：

标签： css background-image css-animations

【解决方案1】：

好的，我的工作方式是不可能的。我可以定位 div（绝对/相对）并使它们成为兄弟而不是孩子。

但我选择创建一个包含我想要的所有旋转的精灵图像并使用 css3 动画。

在 CSS 关键帧动画中，我每次都会移动背景位置：

0% { background-position: 0 0; width: 300px; height: 200px; }
1% { background-position: 0 -200px; width: 300px; height: 200px; }
...

重要的是您必须定义 step-start！

animation-timing-function: step-start;

此步骤在 Internet Explorer 10 中运行良好。 备注：对于较旧的浏览器，动画将无法工作（CSS3 未知或 step-start 未知）并且您的第一个精灵将被显示，因此请确保您的第一个精灵是你的初始状态。

供您参考：我使用 GIMP 创建动画并使用名为 CSS WebSprites 的插件自动生成我的精灵和 CSS 代码： The GIMP CSS WebSprites plugin

【讨论】：