Question

我没有太多运气，我认为这是一个非常简单的改变，但我认为这就是生活：）

我只想要一个div，里面有几个div，它们包含一些垂直文本。这个小提琴可能最好地解释了它 - ＆gt; 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

根据规格看看规范说的是什么：

对于布局由CSS框模型控制的元素， transform属性不会影响周围内容的流动变形元素。但是，溢出区域的范围考虑到转化的元素。这种行为类似于当元素通过相对定位偏移时会发生什么。因此，如果overflow属性的值是scroll或auto，将根据需要显示滚动条以查看已转换的内容在可见区域之外。 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/

Answer 2

就像myfunkyside所提到的那样，这里的css只是视觉效果，而且原件仍占据空间。请参阅下面的解决方案

.side-dates {
    height: 70px;
    border: 1px solid #aaa;
}

.side-date-outter {
	transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    transform-origin: 76% 76%;
    float: left;
    position: relative;
    left: -2px;
    top: 39px;
    width: 16px;
}

.side-date {
    height: 14px;
    width: 64px;
    font-size: 9pt;
    border: 1px solid #aaa;
    top: 30px;
    position: relative;
    left: -5px;
    top: 1px;    
}

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

Answer 3

transform取自实际位置并且不会改变。因此，元素会旋转但不会像您期望的那样float。因此，如果您可以更改标记，则可以尝试rotate内部元素：

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

使用CSS：

.side-date {
    height: 70px;
    width: 20px;
    font-size: 9pt;
    float: left;
    border: 1px solid #aaa;
}
.side-date span {
    display:block;
    position:relative;
    top:100%;
    height: 20px;
    width: 70px;
    transform: rotate(-90deg);
    transform-origin: 0 0;
}

选中 DemoFiddle

CSS变换（旋转）行为不端

3 个答案: