CSS 变换(旋转)行为不当

Question

对于我认为非常简单的改变，我运气不佳，但我想这就是生活 :)

我只想要 1 个 div，里面有几个 div 并排放置，其中包含一些垂直文本。这个 fiddle 可能解释得最好 -> http://jsfiddle.net/urbley/pq6fuyeL/

CSS
.side-dates {
    height: 70px;
    border: 1px solid #aaa;
}

.side-date {
    transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    transform-origin: 76% 76%;
    height: 20px;
    width: 70px;
    font-size: 9pt;
    float: left;
    border: 1px solid #aaa;
}

HTML
<div class="side-dates">
    <div class="side-date">this is a test1</div>
    <div class="side-date">this is a test2</div>
</div>

如您所见，我在各个垂直 div 的左侧和右侧获得了一些令人讨厌的边距。有谁知道它们来自哪里/如何修复？

Answer 1

这是根据规范看规范怎么说的:

For elements whose layout is governed by the CSS box model, the transform property does not affect the flow of the content surrounding the transformed element. However, the extent of the overflow area takes into account transformed elements. This behavior is similar to what happens when elements are offset via relative positioning. Therefore, if the value of the overflow property is scroll or auto, scrollbars will appear as needed to see content that is transformed outside the visible area. http://www.w3.org/TR/css-transforms-1/#transform-rendering

如果你想让它们与它们的“新维度”堆叠在一起，你必须做一些其他的事情，比如像这样为每个 div 使用包装器:

.side-date-wrapper
{
    width: 21px;
    height: 72px;
    float:left;
}

http://jsfiddle.net/pq6fuyeL/6/