将<p>中的水平文本与成角度的</p> <div> </div>对齐

Question

我正在尝试在我的页面上创建带有文字的楼梯效果。我在<p>中包含了一个<section>.元素。该部分具有以下样式：

section{
    transform:rotate(-37.6deg);
    -ms-transform:rotate(-37.6deg); 
    -moz-transform:rotate(-37.6deg); 
    -webkit-transform:rotate(-37.6deg); 
    width: 200px;       
}

我希望我的<p>中的文字被约束到我创建的旋转框，然后能够旋转文本，使每条线都是水平的，沿着线条向下走。 <section>框。

This是该页面的链接，因此您可以更好地了解我要完成的任务。

Answer 1

使用此方法无法实现目标，因为 CSS转换是在 DOM渲染后由GPU 呈现的，因此（例如）转换后的元素t影响其他元素的位置和大小。

为了实现您的目标，您应该使用jQuery解决方案，例如“http://www.csstextwrap.com/”