Question

我希望将句子"share it with your friends"与每个单词相对于前一个单词以更大的倾向旋转。即。这些词的倾向应如下。

分享= 0度
it = x度
= 2x度
你的= 3x度
朋友= 4x度

Answer 1

将每个单词放入嵌套的跨度中，以便每个跨度位于前一个跨度内。

然后使用CSS一次设置所有跨度的旋转。这将导致每个旋转比前一个旋转一点。

请注意，您需要将范围设置为display:inline-block才能使旋转生效，并且您需要设置旋转原点以使它们看起来仍然像句子一样运行。

<div><span>share <span>it <span>with <span>your <span>friends</span></span></span></span></span></div>

div span {
    display:inline-block;
    transform:rotate(-15deg);
    transform-origin: 0% 50%;
}

http://jsfiddle.net/Chnq4/

Answer 2

使用CSS transform与旋转并提供0的来源。你必须在块样式元素上进行。

<div class="a">share <div class="b">it <div class="b">with <div class="b">your <div class="b">friends</div></div></div></div></div>

.a, .b {display: inline-block;}
.b {
    -webkit-transform: rotate(-10deg);
    -webkit-transform-origin: 0;
    -moz-transform: rotate(-10deg);
    -moz-transform-origin: 0;
    transform: rotate(-10deg);
    transform-origin: 0;
}

在此示例中， x = 10 。

DEMO

旋转一个句子，每个单词的倾向越来越大

2 个答案: