正確位置旋轉文本（以字母間距/ HTML5/CSS）

Question

我已閱讀並嘗試了最大約＃2這個話題給出的答案，但沒有人可以爲我工作（轉動是的，它的位置不正確）。我的問題：

• 旋轉文本-90度
• 位置-90度文本正確如下（最終結果）的圖片。
• 代碼應工作的響應式設計（％）

我加入了完整的代碼中的jsfiddle（包括我的頭的內容同上）。我添加了灰色標題，以澄清在圖像/標題/文本開始前存在以上內容：Link to JSFiddle code

您如何（1）旋轉文本，更重要的是（2）如何定位旋轉文本類似於最終結果：

See End Result image

HTML代碼（見的jsfiddle）：

<header> 

<div class="header-wrap"> 

<div class="header-left"></div> 
<div class="header-right"></div> 

</div> 

</header> 

<section> 

<div class="about-wrap"> 

<div class="about-img"><img src="http://www.sidneyblake.com/wp-content/uploads/2015/06/Foggy-black-white-trees-alberta-landscape.jpg" ></div> 
<div class="about-cnt"> 

<div class="about-ttl"><h1>ABOUT</h1></div> 
<div class="about-txt"><p>Viris tibique scaevola mea ut, soluta forensibus suscipiantur et usu, his at munere fabellas. Cu harum quaestio cum, mei an quodsi evertitur adipiscing. Discere inermis dissentias ne mel. At eos possit elaboraret, sea ea vitae lobortis. 

Id doming consulatu usu. Suas quot mei ut, ne habeo liberavisse his. Nec aeterno nostrud disputando ad, per in facete alienum. Cu his debitis inimicus facilisis. 

In audiam tractatos per. Eu est zril reprehendunt. Probo appetere consetetur eam an. Augue ignota sit ex. Ex sanctus nominavi vix, nam ne mandamus intellegat. Vivendum principes eam no, qui ei pericula abhorreant. Mundi mediocrem scribentur duo ne, graeco theophrastus id his.</p></div> 

</div> <!-- End of about-cnt --> 


</div> <!-- End of about-wrap --> 

</section> 

預先感謝。

Answer 1

使用的CSS旋轉

.about-ttl { 
width: 20%; 
float: left; 
transform: rotate(-90deg); 
margin-top:100px; 
} 

https://jsfiddle.net/md4zpxwn/3/

Answer 2

1. 使用CSS3 transform property旋轉文本。
2. 從頂部應用適當的邊距來定位它。

/* Header styles */ 
 

 
.header-wrap { 
 
    width: 100%; 
 
    height: 50px; 
 
    background-color: #ccc; 
 
} 
 

 
.header-left { 
 
    width: 50%; 
 
    float: left; 
 
} 
 

 
.header-right { 
 
    width: 50%; 
 
    float: right; 
 
} 
 

 
img { 
 
    max-width: 100%; 
 
} 
 

 
/* Paragraph styles */ 
 

 
h1 { 
 
\t font-size: 1em; 
 
\t font-weight: bold; 
 
\t font-family: 'Montserrat', sans-serif; \t 
 
\t letter-spacing: 15px; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.about-ttl h1{ 
 
margin-top : 80px; 
 
transform: rotate(270deg); 
 
-ms-transform : rotate(270deg); /* For IE9 */ 
 
-webkit-transform : rotate(270deg); /*Chrome, Opera and Safari*/ 
 
} 
 

 
p { 
 
\t font-family: 'Maven Pro', sans-serif; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
/* Section styles */ 
 

 
.about-wrap { 
 
\t width: 100%; 
 
\t clear: both; 
 
} 
 

 
.about-img { 
 
\t width: 50%; 
 
\t float: left; \t 
 
} 
 

 
.about-cnt { 
 
\t width: 50%; 
 
\t float: right; 
 
} 
 

 
.about-ttl { 
 
\t width: 20%; 
 
\t float: left; 
 
} 
 

 
.about-txt { 
 
\t width: 60%; 
 
\t margin-right: 20%; 
 
\t float: right; \t 
 
}

\t <header> 
 
\t 
 
    <div class="header-wrap"> 
 
    
 
    <div class="header-left"></div> 
 
    <div class="header-right"></div> 
 
    
 
    </div> 
 
     
 
\t </header> 
 
    
 
    <section> 
 
    
 
    <div class="about-wrap"> 
 
    
 
    \t <div class="about-img"><img src="http://www.sidneyblake.com/wp-content/uploads/2015/06/Foggy-black-white-trees-alberta-landscape.jpg" ></div> 
 
    \t <div class="about-cnt"> 
 
    
 
    \t \t <div class="about-ttl"><h1>ABOUT</h1></div> 
 
      <div class="about-txt"><p>Viris tibique scaevola mea ut, soluta forensibus suscipiantur et usu, his at munere fabellas. Cu harum quaestio cum, mei an quodsi evertitur adipiscing. Discere inermis dissentias ne mel. At eos possit elaboraret, sea ea vitae lobortis. 
 

 
Id doming consulatu usu. Suas quot mei ut, ne habeo liberavisse his. Nec aeterno nostrud disputando ad, per in facete alienum. Cu his debitis inimicus facilisis. 
 

 
In audiam tractatos per. Eu est zril reprehendunt. Probo appetere consetetur eam an. Augue ignota sit ex. Ex sanctus nominavi vix, nam ne mandamus intellegat. Vivendum principes eam no, qui ei pericula abhorreant. Mundi mediocrem scribentur duo ne, graeco theophrastus id his.</p></div> 
 
     
 
     </div> <!-- End of about-cnt --> 
 
    
 
    
 
    </div> <!-- End of about-wrap --> 
 
    
 
    </section>

運行的代碼片段看到的結果。

Answer 3

這些變化對你的CSS應該得到它非常接近你的reference image。

.about-ttl { 
    width: 20%; 
    float: left; 
    position: relative; 
    transform: rotate(-90deg) translateX(-50%); 
} 

.about-ttl h1 { 
    display: inline-block; 
    transform: translateY(-50%); 
    position: absolute; 
    right: -15px; /* Should match whatever the h1's letter-spacing length is. */ 
} 

https://jsfiddle.net/md4zpxwn/4/

總之，旋轉和因此其邊緣是針對上述.header-wrap元件沖洗翻譯.about-ttl塊。然後，所以它的邊緣也齊平定位其子<h1>元素（佔<h1>元素的15px字母間距）。此樣式應適用於任意長度的文本（除「ABOUT」外）。如果你這樣做，並且文中有空格，請務必將white-space: nowrap;加到.about-ttl。