旋转HTML正文背景

希望有人能告诉我，如果这是可能的旋转HTML正文背景

我有Opencart的一个网站的背景是一个“土”的图片，我想让它转动它的Z轴动画它，所以它顺时针旋转。

body { 
background:url('../image/bg.jpg') repeat; 
color: #000000; 
font-family: Arial, Helvetica, sans-serif; 
margin: 0px; 
padding: 0px; 
}

这是CSS设置的背景，我找到了这块但我看到我无法引用背景属性？不知道，但这是我基本上想要身体的背景属性。

.image { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    width: 120px; 
    height: 120px; 
    margin:-60px 0 0 -60px; 
    -webkit-animation:spin 8s linear infinite; 
    -moz-animation:spin 8s linear infinite; 
    animation:spin 8s linear infinite; 
} 
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } } 

@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } } 

@keyframes spin { 100% { -webkit-transform: rotate(360deg); 
ransform:rotate(360deg); }  }

这是否可以旋转HTML页面的背景图像？

来源

2013-10-30 user2870429

你有没有尝试设置'变换：旋转（0deg）;'在类图像配下手？那么它有两个值之间的动画？ – JosephGarrone

它旋转图像，如果我有 user2870429

You cannot rotate a background-image. You might be able to rotate an element (not the body) but an absolutely positioned div...that you could rotate. –

正如我们所说，你不能旋转一个BG图像。你可以做的是为图像添加到您的HTML，它绝对位置和旋转是

JSFiddle for inline image

作为替代，你可以使用一个伪元素，其会从HTML完全删除图像，并把它早在它所属的CSS

JSFiddle for Pseudo-element

body { 
    position:relative; 
} 

body:before { 
    content:""; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    width: 120px; 
    height: 120px; 
    margin:-60px 0 0 -60px; 
    background-image:url(http://placekitten.com/300/300); 
    -webkit-animation:spin 8s linear infinite; 
    -moz-animation:spin 8s linear infinite; 
    animation:spin 8s linear infinite; 
    opacity:0.5; 
    border-radius:50%; 
} 
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } } 
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } } 
@keyframes spin { 100% { transform:rotate(360deg); }

来源

2013-10-30 11:23:41

谢谢你们两位，谢谢，我很感激。 :) – user2870429

您将无法应用transform来旋转背景图片：它只能应用于整个DOM元素。您最好的选择是 - 而不是将背景应用于body标签 - 将图像本身包含在您的标记中。

然后，您将被应用来使用定位和z-index来在正确的位置可视地获取图像，并且在标记中，您可以在该元素上应用transform。

我上面描述的是exactly what your example code achieves（我没有碰过那个小提琴中的CSS），所以我对你的问题有些困惑。

来源

2013-10-30 10:52:54 CherryFlavourPez

do you think I will get it rotating(animate) as per code above for the image? if yes if you could really please give me the smalles example of what to do, I would really appreciate it. – user2870429

Check out the link in my answer - is that what you're trying to achieve? – CherryFlavourPez

I have checked that part out, for me its brilliant code, But I need this to rotate the background-image, yours works brilliantly if I have a 我需要旋转图片（对不起，如果我的解释听起来不错 - 但谢谢你倾听） – user2870429

旋转HTML正文背景

回答

相关问题