CSS变换（旋转）行为不端

我并没有什么我以为会是一个非常简单的改变运气，但是这就是生活，我猜这是CSS变换（旋转）行为不端

我只是想1个格与几个div的内部旁边对方说包含一些垂直文本。这小提琴可能是最好的解释是 - >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的权利。有谁知道他们来自哪里/如何解决？

来源

2014-10-31 Urbley

我相信旋转只是视觉效果。所以元素仍然占据了页面原始位置和大小的空间（旋转之前）。 – myfunkyside 2014-10-31 13:36:16

你能改变你的html吗？ http://jsfiddle.net/pq6fuyeL/2/ – DaniP 2014-10-31 13:44:08

谢谢丹科。作品一种享受！把它作为答案，我会接受。 – Urbley 2014-10-31 13:54:15

的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

来源

2014-10-31 14:05:28 DaniP

它根据规格见规范说什么：

对于其布局由CSS盒模型的约束，该变换属性不会影响周围变换的元素内容的流动元素。但是，溢出区域的范围考虑了转换后的元素。这种行为类似于当元素通过相对定位偏移时会发生什么。因此，如果溢出属性的值为滚动或自动，则会出现滚动条，以查看在可见区域外面转换为的内容。 http://www.w3.org/TR/css-transforms-1/#transform-rendering

如果你希望他们与他们的“新维度”栈你必须做别的事情，比如使用的包装为每格是这样的：

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

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

来源

2014-10-31 13:51:27 Luizgrs

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

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

 
.side-date-outter { 
 
\t 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>

来源

2014-10-31 13:54:06 Urielzen

CSS变换（旋转）行为不端

回答

相关问题