CSS旋转内部旋转元素不起作用

Question

我正在尝试与一些子div一起旋转父div，然后旋转子div背面内部的跨度以使文本仍然可读...

这是一个JSFiddle

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>

和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);
}

但是跨度不会向后旋转（它不会自行旋转）。那么有人知道我做错了吗？/我该怎么做才能使文本再次可读？

Answer 1

display: block;在跨度上放置以旋转它。