如何使用CSS旋轉文本

無法旋轉文本。灰色的div寬度必須是50.使用Chrome。如何使用CSS旋轉文本

HTML：

<div class="divContactInfo"> 
    <div class="tabHeader"> 
     <span class="textRotate">My Contact Info</span> 
    </div> 
</div>

CSS：

.divContactIno 
{ 
position:fixed; 
    right:0; 
    border:1px solid red; 
    top:49%; 
    width:350px; 
    height:500px; 
} 
.divContactInfo .tabHeader 
{ 
border:1px solid gray; 
    width:50px; 
    height:120px; 
} 
.textRotate 
{ 
    -webkit-trasform:rotate(-90deg); 
    -moz-trasform:rotate(-90deg); 
}

來源

2014-03-02 Ruby

您的css拼寫錯誤。 - > trasform < - – davidcondrey

文本必須在一行中，div寬度爲50px。這可能嗎。 – Ruby

檢查我的答案。 – davidcondrey

在回答您的評論..試試這個

.textRotate { 
    display: block; 
    white-space: pre; 
    left: 10px; 
    margin-top: 80px; 

    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
    -o-transform: rotate(-90deg); 
    -ms-transform: rotate(-90deg); 
    transform: rotate(-90deg); 
    }

來源

2014-03-02 07:35:08 davidcondrey

非常感謝您。 – Ruby

不用擔心，您的歡迎。 – davidcondrey

您不能旋轉內聯元素，你需要正確拼寫transform。

.textRotate { 
    display: inline-block; 
    -webkit-transform:rotate(-90deg); 
    -moz-transform:rotate(-90deg); 
}

請注意，您還拼錯divContactInfo爲divContactIno。

http://jsfiddle.net/mattball/R7bQn/

來源

2014-03-02 07:26:36

謝謝，但文本必須單行。我希望div寬度保持爲50，因爲我必須稍後再設計它。 – Ruby

嘗試添加屬性display然後用旋轉：

.divContactInfo 
{ 
position:fixed; 
    right:0; 
    border:1px solid red; 
    top:49%; 
    width:350px; 
    height:500px; 
} 
.divContactInfo .tabHeader 
{ 
border:1px solid gray; 
    width:50px; 
    height:120px; 
} 


.textRotate { 
display:block; 
/* Safari */ 
-webkit-transform: rotate(-90deg); 

/* Firefox */ 
-moz-transform: rotate(-90deg); 

/* IE */ 
-ms-transform: rotate(-90deg); 

/* Opera */ 
-o-transform: rotate(-90deg); 

/* Internet Explorer */ 
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 

}

http://jsfiddle.net/NLfaz/3/

來源

2014-03-02 07:27:10 Radian

謝謝，但文本必須在單行。我希望div寬度保持爲50，因爲我必須稍後再設計它。 – Ruby

.divContactInfo 
    { 
    position:fixed; 
     right:0; 
     border:1px solid red; 
     top:49%; 
     width:350px; 
     height:500px; 
    } 
    .divContactInfo .tabHeader 
    { 
    border:1px solid gray; 
     width:50px; 
     height:120px; 
    } 
    .textRotate 
    { 
     display:block; 
     -webkit-transform:rotate(-90deg); 
     -moz-transform:rotate(-90deg); 
    }

來源

2014-03-02 07:30:48 Fahim

如何使用CSS旋轉文本

回答

相關問題