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變換（旋轉）行爲不端

回答

相關問題