1

我想以"share it with your friends"相对于前一个单词的倾斜度增加每个单词来旋转句子。IE。词的倾斜应该如下。

  • 分享 = 0 度
  • 它 = x 度
  • 与 = 2x 度
  • 你的 = 3x 度
  • 朋友 = 4x 度
4

2 回答 2

4

将每个单词放入一个嵌套的 span 中，这样每个 span 都在前一个 span 内。

然后使用 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/

于 2013-08-30T13:59:41.420 回答
3

将 CSStransform与旋转一起使用并给出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。

演示

于 2013-08-30T13:56:01.213 回答