Div always facing the screen inside a rotateY div - html

Question

This is my code:
html
<div id="back">
<div id="right_text">TEST</div>
<div id="left_text">TEST2</div>
</div>
<div id="mid"></div>
css
#mid {
border: 1px solid black;
height: 100px;
width: 100px;
-webkit-animation: rotate linear 5s;
-webkit-animation-iteration-count: infinite;
margin:auto;
margin-top:-125px;
position: static;
}
#-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#back {
width:auto;
height: 150px;
border: 1px solid red;
-webkit-animation: rotateY linear 5s;
-webkit-animation-iteration-count: infinite;
position: static;
}
#-webkit-keyframes rotateY {
from {
-webkit-transform: rotateY(0deg)
}
to {
-webkit-transform: rotateY(360deg)
}
}
#right_text {
border: 1px solid green;
height: 75px;
width: 75px;
float: right;
margin-top: 35px;
text-align: center;
}
#left_text {
border: 1px solid green;
height: 75px;
width: 75px;
float: left;
margin-top: 35px;
text-align: center;
}
http://jsfiddle.net/bXhL8/
As you can see, both text-divs face their back to the screen when they are not on their side of origin. i want both of them to always stay the same and just "hang on" to the rotation of my back-div.
my question would be if that is possible in css alone or if id need js for it.

Answer 1

Add the following to your css
#left_text, #right_text {
-webkit-animation: rotateY linear 5s;
-webkit-animation-iteration-count: infinite;
}
JSFiddle
Update
Updated JSFiddle

Answer 2

here is my new bit of code. its not a perfect circle yet, because i just added 4 frames to my #keyframes. im thinking about making a actual circular rotation and adding a skew() element to the whole circular function / to my whole body, don't know if that will work though.
thanks for your help!
html:
<div id="right_text">
<div id="right_text_text">TEST</div>
</div>
<div id="left_text">
<div id="left_text_text">TEST2</div>
</div>
<div id="mid"></div>
css:
#mid {
border: 1px solid black;
background-color: red;
height: 100px;
width: 100px;
-webkit-animation: rotate linear 5s;
-webkit-animation-iteration-count: infinite;
margin-top: 105px;
margin-left: 210px;
position: static;
}
#-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(-360deg);
}
}
#right_text_text {
border: 1px solid black;
text-align: center;
position: absolute;
width: 50px;
-webkit-animation: downupright linear 8s infinite;
}
#left_text_text {
border: 1px solid black;
text-align: center;
position: absolute;
width: 50px;
-webkit-animation: updownleft linear 8s infinite;
}
#-webkit-keyframes downupright {
0% { left: 490px; top: 150px;}
25% { left: 245px; top: 100px; z-index: -10;}
50% { left: 0px; top: 150px;}
75% { left: 245px; top: 200px; z-index:10;}
100% { left: 490px; top: 150px;}
}
#-webkit-keyframes updownleft {
0% { left: 0px; top: 150px;}
25% { left: 245px; top: 200px; z-index: 9;}
50% { left: 490px; top: 150px;}
75% { left: 245px; top: 100px; z-index: -9;}
100% { left: 0px; top: 150px;}
}
http://jsfiddle.net/bXhL8/4/