CSS动画旋转

Question

我在一个容器中有两个背景图像，我想旋转其中的一个，但它似乎不工作。我管理要么旋转两者，要么什么都不发生。提前致谢。

@keyframes image { 
    0% { background-position: right, center} 
    50% {transform: rotateY(180deg,0deg)} 
    100% {background-position: left, center} 
} 

Answer 1

转型背景只有

#myelement { 
    position: relative; 
    overflow: hidden; 
} 
#myelement: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); 
} 

，你可以找到很好的解释教程和前这里https://www.sitepoint.com/css3-transform-background-image/

Answer 2

.container{ 
 
    border:thin black solid; 
 
    height:200px; 
 
} 
 

 
.bg1 { 
 
    margin: 20px; 
 
    width: 100px; 
 
    height: 100px;  
 
    background: #000000; 
 
    -webkit-animation: spin 4s infinite linear; 
 
    float:left; 
 
} 
 

 

 
.bg2 { 
 
    margin: 20px; 
 
    width: 100px; 
 
    height: 100px;  
 
    background: #f00; 
 
    float:left; 
 
} 
 

 
/*Chrome*/ 
 
@-webkit-keyframes spin { 
 
\t 0% {-webkit-transform: rotate(0deg);} 
 
\t 100% {-webkit-transform: rotate(360deg);} \t 
 
} 
 

 

 
/*Mozilla*/ 
 
@-moz-keyframes rotate { 
 
    from {-moz-transform:rotate(0deg);} 
 
    to { -moz-transform:rotate(360deg);} 
 
}

<div class="container" > 
 
    <div class="bg1"></div> 
 
    <div class="bg2"></div> 
 
</div>

JSFiddle Demo

试试这个。这是你想要的吗？