CSS animation rotation - html

Question

I have two background images in one container and I am trying to rotate only one of them but it doesn't seem to work. I manage either to rotate both or nothing happens. Thanks in advance.
#keyframes image {
0% { background-position: right, center}
50% {transform: rotateY(180deg,0deg)}
100% {background-position: left, center}
}

Answer 1

Transforming the Background Only
#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);
}
you can find the very well explained tutorial and ex here 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 {
0% {-webkit-transform: rotate(0deg);}
100% {-webkit-transform: rotate(360deg);}
}
/*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
Try this. is this the same that you want?