CSS Rotate inside rotated element not working - css

Question

I'm trying to rotate an parent div with some child div's, and than rotate the spans inside the child div's back so that the text is still readable...
Here's an JSFiddle
The HTML:
<div id="bt_container">
<div class="row_container">
<div><span>col1.1</span>
</div>
<div><span>col1.2</span>
</div>
<div><span>col1.3</span>
</div>
<div><span>col1.4</span>
</div>
</div>
<div class="row_container">
<div><span>col2.1</span>
</div>
<div><span>col2.2</span>
</div>
<div><span>col2.3</span>
</div>
<div><span>col2.4</span>
</div>
</div>
</div>
And the CSS:
#bt_container {
width: 1000px;
height:600px;
border: 1px solid #333;
}
.row_container {
margin: 10px;
border: 1px solid red;
}
.row_container div {
width:70px;
height: 70px;
border: 1px solid blue;
background: url('http://i.imgur.com/wI9t0bj.png');
background-size: cover;
}
.row_container div {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.row_container div span {
color: white;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
But the span isn't rotating back ( it's not rotating on it's own ). So does anybody knows what i do wrong? / What do i have to do to make the text readable again?

Answer 1

Put a display: block; on your span in order to rotate it.

Answer 2

Add display:inline-block or display:block to the span. Or just use block elements instead of span.

Answer 3

working fiddle
edit display and padding (to show entire span text)
.row_container div span {
color: white;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
display:inline-block;
padding-left:20px;
}