是否可以在網頁中以一定角度顯示文字？

我想知道是否有可能在某個網頁中以某個角度創建文本，例如40度。如果可能的話，我該怎麼做？是否可以在網頁中以一定角度顯示文字？

編輯：最後，我決定去與Mathias Bynens的答案。

來源

2011-03-23 Ryan S

爲了增加馬蒂亞斯的回答，您可以也在IE中旋轉文字：http://snook.ca/archives/html_and_css/css-text-rotation

但是，您必須爲90°的倍數。

除此之外，您可以利用SVG/VML旋轉文本。例如，在此頁面上查看：http://raphaeljs.com/text-rotation.html

它使用RaphaelJS庫進行跨瀏覽器文本旋轉，但沒有圖像。

來源

2011-03-23 10:16:18 Boldewyn

已經在凱爾的答案和在我的意見中提到，但是，你是對的:) – 2011-03-23 10:18:09

我看到他們都保存答案時。你應該在評論中回覆你的評論。使其完全覆蓋100％:-) – Boldewyn 2011-03-23 10:22:12

因此，最好的解決方案是使用RaphaelJS庫進行跨瀏覽器旋轉？有沒有更簡單的方法？ – 2011-03-23 10:32:51

使用CSS3變換：

.selector { 
    -webkit-transform: rotate(40deg); 
    -moz-transform: rotate(40deg); 
    -o-transform: rotate(40deg); 
    transform: rotate(40deg); 
}

IE不支持filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);，其中所述旋轉屬性接受四個值之一：0，1，2，或3將旋轉元素0，90，180或270度。這是一個過濾器，所以我不會推薦使用它。

來源

2011-03-23 10:09:02

該OP應該注意的是，大多數版本的IE不支持CSS3 – 2011-03-23 10:10:28

@Richard好點。 IE不支持'filter：progid：DXImageTransform.Microsoft.BasicImage（rotation = 3）;'，其中'rotation'屬性接受四個值之一：'0'，'1'，'2'或'3'將分別旋轉元素0,90,180或270度。這是一個過濾器，所以我不會推薦使用它。 – 2011-03-23 10:15:43

非常感謝大家，我會嘗試一下。 – 2011-03-23 10:30:05

馬蒂亞斯是正確的，他的回答，而且還支持IE，你可以使用自己的過濾器：

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 
/*play with the number to get it right*/

那麼IE將支持太:)

來源

2011-03-23 10:14:43 Kyle

不幸的是，正如我在回答的評論中指出的那樣，rotation屬性將只接受四個值：'0'，'1'，'2'或'3'，它們將旋轉元素0,90,180或270度。沒有辦法以這種方式做40°旋轉。 – 2011-03-23 10:16:42

啊哈，真的嗎？我從來沒有使用過濾器，只是知道它，所以我沒有意識到它是「固定的」。信任MS發明一些有用的東西，但同時_useless_。 – Kyle 2011-03-23 10:39:12

這是一個恥辱，爲什麼IE往往是如此不同（乏味）在時間 – 2011-03-25 09:06:40

是否可以在網頁中以一定角度顯示文字？

回答

相關問題