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

Попробуйте это. это то же самое, что вы хотите?