Question

我试图用一些子div来旋转父div，然后旋转子div中的跨距，以便文本仍然可读......

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;以旋转它。

Answer 2

将display:inline-block或display:block添加到span。或者只使用块元素而不是span。

Answer 3

工作fiddle

编辑显示和填充（以显示整个范围文本）

.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;
}

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

3 个答案: