反轉文本在css中不工作

我需要將文本旋轉90度。我遵循了幾個東西，包括計算器，但不能反轉文本。反轉文本在css中不工作

我的CSS是：

.semiInverted { 
    -moz-transform: rotate(90deg); 
}

的jsfiddle：http://jsfiddle.net/AE2z2/

任何人可以幫助我嗎？

來源

2013-12-11 Govan

這個怎麼樣：'-webkit-transfor m：旋轉（90度）; \t \t \t \t \t -moz-transform：rotate（90deg）; \t \t \t \t \t -ms-transform：rotate（90deg）; \t \t \t \t \t -o-transform：rotate（90deg）; \t \t \t \t \t變換：旋轉（90度）;' – user2002495

@Govan其用於確保每一個衆所周知的瀏覽器將使用CSS3轉換正確 – vishnu

@ user2002495不工作屬性（如瀏覽器，火狐，Safari，歌劇）。在小提琴中嘗試。 – Govan

元素應該是一個塊元件，否則它不能轉動。此外<text>不是有效的HTML標籤;改爲使用<span>或<div>。最後，你不應該只使用Mozilla特定的CSS屬性（-moz-…）。正確的CSS是：

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

JSFiddle

來源

2013-12-11 10:19:21 Jonathan

爲什麼你使用display：inline-block。否則它不工作？ – Govan

@Govan是的。元素應該是塊級元素;否則不能旋轉。 – Jonathan

您告訴我們，使用我們不能旋轉，但@rajeshkakawat使用文本完成了它。 – Govan

text不是一個有效的HTML標記。將text標籤切換到span，它應該可以工作。

CSS

.semiInverted { 
    display: inline-block; 
    transform-origin: bottom left; 
    -moz-transform: rotate(90deg); 
    transform: rotate(90deg); 
}

HTML

Inverted Text:<span class="semiInverted">&nbsp;&#8250;</span><br> 
Normal Text:<span>&nbsp;&#8250;</span>

來源

2013-12-11 10:18:48

您使用的是實驗性的，只有火狐版本的屬性。擺脫-moz-
您試圖設計一個不存在於HTML中的<text>元素。改爲使用div或其他transformable element。

一種可變形元件是在這些類別之一的元素：

一個元件，其佈局由CSS盒模型其是塊級或原子inline-管轄高級元素或其顯示屬性計算爲錶行行，錶行行，錶行行，行， SVG名稱空間，並且不受具有屬性轉換，'patternTransform'或gradientTransform的CSS盒模型的支配。

來源

2013-12-11 10:19:24 Quentin

工作正常，如果你使用普通的HTML和CSS（我試過用段） http://jsbin.com/AJosAfan/1/watch?html,css,output

來源

2013-12-11 10:19:39 user3023071

謝謝。它也很好。 – Govan

嘗試這樣的事情，FIDDLE

.semiInverted { 
    -moz-transform: rotate(90deg); 
    display:block; 
    float:left; 
}

來源

2013-12-11 10:19:55

它工作正常..我可以知道我的代碼沒有工作的原因嗎？ – Govan

我認爲它不適用於內聯元素，不確定 –

我想你想要做什麼只是使元素成爲內聯塊

http://jsfiddle.net/AE2z2/29/

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

來源

2013-12-11 10:26:40

HTML

<div > 
     Inverted Text: <span class="semiInverted" > &nbsp;&#8250; </span> 
    <br> 
    Normal Text:<text>&nbsp;&#8250;</text> 
     </div>

CSS

.semiInverted { 
     -webkit-transform:rotate(-90deg); 
-moz-transform:rotate(-90deg); 
-o-transform:rotate(-90deg); 
transform:rotate(-180deg); 
ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2)"; 
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2); 
    display:inline-block; 
    }

小提琴 http://jsfiddle.net/AE2z2/74/

來源

2013-12-11 10:38:30

反轉文本在css中不工作

回答

相關問題