全屏旋转背景图片答案

【问题标题】：Fullscreen spinning background image全屏旋转背景图片
【发布时间】：2013-03-26 12:07:28
【问题描述】：

我一直在到处寻找如何实现覆盖整个屏幕的动画旋转图像的效果。 Like this one。

基本上，我想要的是让它旋转并全屏显示。

这是我目前得到的，http://losmosca.com.ar/reiki/

HTML：

<img src="img/bg.jpg" id='test' class='rotating'>

CSS3：

#test {
position:relative;
margin:0 auto;
width:1000px;
height:1000px;
}

@-webkit-keyframes rotating {
     from{
        -webkit-transform: rotate(0deg);
     }
     to{
        -webkit-transform: rotate(360deg);
     }
}

.rotating {
    -webkit-animation: rotating 1000s linear infinite;
}

如您所见，我可以让它旋转但不能全屏，这可能吗？谢谢！

【问题讨论】：

你必须让你的图像分辨率更高。 @user2207103
他们使用 javascript 而不是 CSS 来制作动画。使用变换，然后使用缩放/旋转属性。

标签： jquery image css fullscreen spinning

【解决方案1】：

尝试使用width:100%; 而不是width:1000px;

和height:100% 而不是height:1000px;

顺便说一下很酷的效果，我可能要找个借口来使用那个技巧。

【讨论】：

我试过了，但是在旋转时你会看到黑色的身体背景。
你用的是什么浏览器？
我明白您在 Chrome 中所说的内容，100% 在 Firefox 中有效。
很抱歉，我不能提供更多帮助。当你弄清楚时，一定要发布它。
旋转在 chrome 中工作，但在 Firefox 中没有。将其更改为 100%，它看起来很奇怪。我想我需要为此使用 jquery。