通过 html css 和 javascript 进行倾斜设计？

Question

如何使用 html、css 和 javascript 实现http://jdstiles.com/java/angledtext2.html 这种角度（倾斜）。在设计中，我们有表格结构，通过点击一个选项卡，下面的区域应该刷新而不重新加载页面（比如 jquery 或 ajax）。

Answer 1

看起来他们这样做的方式是使用三角函数将文本绘制为线条。它是基于矢量的，因此他们创建了一个上升/运行，将单词拆分为字符，然后循环遍历函数，为每个字符添加一个跨度，并将其定位。

不完全清楚你想如何使用它，但你要做的是以某种方式将你的表单分解成最小的元素，然后使用三角函数计算的基础将样式应用于每个元素循环中每个元素的位置。

虽然不知道你到底想做什么，但向你展示它在代码中的样子是没有意义的。您链接到的网站可能是该过程的最佳示例，即使不是您想要做的。

Answer 2

你有很多选择：

• 使用this jquery plugin。
• 使用您链接到的那个。
• 将文本渲染到画布中——网上有很多关于如何做到这一点的示例。您需要一个非画布解决方案，例如 excanvas.js
• 手动使用较新的浏览器特定属性之一

使用该插件可能会让你走得最快，它会旋转字母。