Question

希望有人可以告诉我这是否可能

我在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页面的背景图像？

Answer 1

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

然后，您将申请使用定位和z-index在视觉上将图像放在正确的位置，并且在标记中，您可以在该元素上应用transform。

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

Answer 2

正如我们所说，你不能旋转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);    }

旋转html体背景

2 个答案: