如何使用父div來包含＆移動旋轉的跨度？

-1

如何在一次移動中使用父div（#warped）來移動幷包含我旋轉的span元素（實際上是我想要保留在所述位置上的「彎曲詞」）？如何使用父div來包含＆移動旋轉的跨度？

我已經使用這個鏈接來幫助生成曲率：http://csswarp.eleqtriq.com/

的<span>標籤被放置在#warped父元素中我的HTML文件中，但儘管這對網頁本身，他們看起來位於的#warped外div

例如，我想將整個彎曲的單詞移動到頁面的左側。我將如何做到這一點？

這裏是CSS：

#warped { 
position: relative; 
display: block; 
} 

#warped>span[class^=w]:nth-of-type(n+0) { 
display: block; 
position: absolute; 
transform-origin: 50% 100%; 
} 

#warped span { 
font-family: 'ABeeZee'; 
font-size: 38px; 
font-weight: regular; 
font-style: normal; 
line-height: 0.65; 
white-space: pre; 
overflow: visible; 
padding: 0px; 
} 

#warped .w0 { 
transform: rotate(0.91rad); 
width: 20px; 
height: 24px; 
left: 552.15px; 
top: 152.55px; 
} 

#warped .w1 { 
transform: rotate(1.06rad); 
width: 23px; 
height: 24px; 
left: 565.17px; 
top: 174.68px; 
} 

    etc etc

下面是HTML，以及：

<div id='warped'> 
<span class='w0'>F</span><span class='w1'>a</span><span class='w2'>n</span><span class='w3'>t</span><span class='w4'>a</span><span class='w5'>s</span><span class='w6'>t</span><span class='w7'>i</span><span class='w8'>c</span><span class='w9'>!</span><span class='w10'>!</span><span class='w11'>!</span><span class='w12'>!</span> 
</div>

來源

2015-06-25 Mervodactyl

我很困惑你想要什麼。 1）將單詞移到左邊（是不是已經發生了？）2）製作彎曲的單詞？（現在所有的字母混在一起..？ –

我想用自己的容器自由移動彎曲的單詞，#warped，這樣如果我是容器的浮子，它會這樣做，或者如果我想要以#warped元素爲中心包含其所有子元素，我也可以這樣做 – Mervodactyl

他們已經在做你想做的事了，你只需設置一些荒謬的值，例如'left：565.17px; top：174.68px;'in' #warped .w1'使它看起來好像不是，你的代碼正在做你要告訴它的東西，嘗試移動'＃warped'，你會發現你的文本也移動了。 – jaunt

的問題是在span元素position:absolute和display:block。將其更改爲：

#warped>span[class^=w]:nth-of-type(n+0) { 
display: inline-block; 
transform-origin: 50% 100%; 
}

只要你沒有必要在你的#warped指定寬度這將是瀏覽器的100％，文本看起來像它的外面。

來源

2015-06-25 15:44:21 RaziTazi

試試這個：http://jsfiddle.net/54L30x1j/

基本上在其網站上：http://csswarp.eleqtriq.com/，你可以重新大小的窗口，使之小。那麼你的自我，你可以進一步減少額外的大小。儘可能將文字放在左上角。

<div id='warped'> <span class='w0'>F</span><span class='w1'>a</span><span class='w2'>n</span><span class='w3'>t</span><span class='w4'>a</span><span class='w5'>s</span><span class='w6'>t</span><span class='w7'>i</span><span class='w8'>c</span> 

</div> 

<p> 
    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum quasi ad ipsum cum ipsa repellendus recusandae in molestias fugiat placeat maiores aspernatur numquam neque id blanditiis. Iusto amet odio natus.</span> 
    <span>Ipsam quas incidunt deserunt molestias asperiores deleniti temporibus quisquam vel sapiente dolores aliquam eum optio minus cupiditate ipsum illo veritatis eligendi obcaecati porro ea rerum dolore repudiandae neque earum voluptatem.</span> 
    <span>Totam officiis saepe tenetur tempore voluptate cupiditate fugit exercitationem voluptatem illum possimus. Dicta similique dolore laboriosam ipsum modi minus saepe accusantium consectetur natus architecto harum commodi porro eius est nemo.</span> 
    <span>Officiis labore quibusdam modi autem velit neque reiciendis unde quaerat delectus expedita consectetur nemo nobis assumenda officia porro cum quos voluptates molestiae enim debitis commodi saepe id dolorum. Repudiandae repellat.</span> 
    <span>Aspernatur non nobis nesciunt deserunt possimus nulla repellat voluptatibus fuga asperiores error optio ipsa adipisci voluptate quidem esse commodi recusandae molestias dolores iure minima sapiente laborum molestiae dolor quisquam ratione.</span> 
</p>

來源

2015-06-25 15:45:42

如何使用父div來包含＆移動旋轉的跨度？

回答

相關問題