Question

我如何使用父div（#warped）来移动和包含我的旋转跨度元素（实际上是“弯曲的单词＆＃39;我想保持在所述位置”）在一个动作中？

我使用此链接来帮助生成曲率：http://csswarp.eleqtriq.com/

#warped代码放在我的HTML文档的#warped父元素中，但尽管如此，网页本身似乎位于#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 div

之外

我想，例如，将整个弯曲的单词移动到页面的左侧。我该怎么做？

这是CSS：

<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>

以下是HTML：

{{1}}

Answer 1

问题在于position:absolute元素上的display:block和span。将其更改为：

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

只要您的#warped上没有指定的宽度，它就会是浏览器的100％，而文本看起来就像是在外面。

Answer 2

试试这个：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>

如何使用父div包含＆amp;移动旋转跨度？

2 个答案: