使用html和css在圈子上書寫文本

-10

我想在圓圈上寫一些文本（我的意思是，文本不會水平，但每個字母都會有不同的方向）。是否有可能使用HTML和CSS？謝謝！使用html和css在圈子上書寫文本

2013-05-14 Andrea

例子？你有什麼嘗試？是不是要做的東西，但修復的東西 – DiederikEEn 2013-05-14 12:31:16

你可以使用lettering.js .ref：http：//css-tricks.com/set-text-on-a-circle/ – dreamweiver 2013-05-14 12:33:00

做一些谷歌搜索，然後再發布SO：） – dreamweiver 2013-05-14 12:33:23

你可以但你最終不得不做一些重大的數學來實現你的目標。您將需要使用以下CSS作爲起點。

.rotate { 

/* 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); 

}

從css-tricks.com

來源

2013-05-14 12:32:01 Cam

沒有設置一個圓（或任意曲線）的網絡類型的任何超級簡單的標準化方式。但這是可以完成的！我們將在此探索一種方法。但要預先警告，我們將使用一些CSS3和JavaScript，而不是針對不支持某些所需技術的舊版瀏覽器提供兩種聲音。如果你對這個項目感興趣，那麼這種東西可能仍然是最好的，並且可以通過適當的替代文本進行圖像處理，或者可以在可以處理它的瀏覽器中使用適當的特徵檢測，從而將圖像翻轉出來。 得益於css-tricks.com

DEMO

DOWNLOAD FILES

DOCUMENTATION

HTML

<h1> 
    <span class="char1">E</span> 
    <span class="char2">s</span> 
    <span class="char3">t</span> 
    <span class="char4">a</span> 
    <span class="char5">b</span> 
    <!-- you get the idea --> 
</h1>

CSS

h1 span { 
    font: 26px Monaco, MonoSpace; 
    height: 200px; 
    position: absolute; 
    width: 20px; 
    left: 0; 
    top: 0; 
    transform-origin: bottom center; 
} 

.char1 { transform: rotate(6deg); } 
.char2 { transform: rotate(12deg); } 
.char3 { transform: rotate(18deg); } 
/* and so on */

有一個SUPER DEMO GIVE FROM THEHERE

來源

2013-05-14 12:32:28 underscore

使用html和css在圈子上書寫文本

回答

相關問題