用它的內容旋轉div問題

-1

我想使連續的div - 垂直方向的內容using CSS。所以我使用了transform：rotation（）方法。如果我使用下面的代碼，它會得到重疊。用它的內容旋轉div問題

輸入：

<html> 
<head> 
    <style type='text/css'> 
    .container{ 
     -webkit-transform: rotate(90deg); 
     -moz-transform: rotate(90deg); 
     -o-transform: rotate(90deg); 
     -ms-transform: rotate(90deg); 
     transform: rotate(90deg); 
     -webkit-transform-origin: left top; 
     -moz-transform-origin: left top; 
     -ms-transform-origin: left top; 
     -o-transform-origin: left top; 
     transform-origin: left top; 
     margin:10px; 
     background-color:#ffceff;  
    } 
    </style> 
</head> 
<body> 
    <div class='container '> 
     <span>Rotate Me</span> 
    </div> 
    <div class='container '> 
     <span>Rotate Me</span> 
    </div> 
</body> 
</html>

輸出：

預期輸出：

有人可以爲此提出解決方案嗎？

注：

如果我使用display: inline-block，那麼它不重疊，但它是容器的寬度的空間被旋轉後容器之間佔據。

來源

2016-01-23 Ponmalar

我找到了解決辦法，我們必須添加一個「外部」標籤，並指定寬度，溢出數據將被固定與枝條空間：NOWRAP代碼，請嘗試以下代碼：

CSS：

.outer { 
white-space: nowrap; 
display: inline-block; 
width: 20px; 
} 
.container { 
    -webkit-transform: rotate(90deg); 
    -moz-transform: rotate(90deg); 
    -o-transform: rotate(90deg); 
    -ms-transform: rotate(90deg); 
    transform: rotate(90deg); 
    -webkit-transform-origin: bottom left; 
    -moz-transform-origin: bottom left; 
    -ms-transform-origin: bottom left; 
    -o-transform-origin: bottom left; 
    transform-origin: bottom left 0px; 
    margin:10px; 
}

HTML：

<div class='outer'> 
    <div class='container' style="background-color: red;"> 
     <span>Rotate Measdadadadsasd</span> 
    </div> 
</div> 

<div class='outer'> 
    <div class='container' style="background-color: blue;"> 
     <span>Rotate Me</span> 
    </div> 
</div>

來源

2016-01-23 10:27:06

喲u需要把所有的元素在一個容器中，而這一次

.container{ 
 
     -webkit-transform: translateY(-100%) rotate(90deg) ; 
 
     transform: translateY(-100%) rotate(90deg); 
 
     -webkit-transform-origin: left bottom; 
 
     transform-origin: left bottom; 
 
     margin:10px; 
 
     background-color:#ffceff;  
 
    }

<div class='container'> 
 
     <div> 
 
     <span>Rotate Me</span> 
 
     </div> 
 
     <div> 
 
     <span>Rotate Me</span> 
 
     </div> 
 
    </div>

來源

2016-01-23 11:02:29 vals

感謝轉動。但是，如果不添加普通容器，我需要旋轉元素。 – Ponmalar

@Ponmalar爲什麼？我認爲這是最好的CSS解決方案。 –

你是說HTML不能被修改？那麼...有多少元素？寬度是已知的還是有限的？ – vals

用它的內容旋轉div問題

回答

相關問題