html - 如何在HTML中围绕圆形创建透视图文本？

我必须在网页上的菜单和内容上添加一些透视文字。以下是我应该达到的效果图像的链接。可能吗？从哪儿开始？我一无所知，甚至不知道该怎么办。感谢您的帮助。

http://goo.gl/Wlz5b

最佳答案

旋转文字

如果只需要旋转文本元素，则可以使用2D-transform rotation在CSS3中完成。

要支持IE8和更早版本，将需要使用IE matrix filter（以及一些额外的工作才能正确放置文本）。

JSFiddle Demo

的HTML

<div class="content">
    <p class="text text1">This is a short sentence.</p>
    <p class="text text2">This is a second sentence.</p>
    <p class="text text3">This is a third sentence.</p>
</div>

的CSS

.text {
    -webkit-transform-origin: 0% 0%;
       -moz-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
            transform-origin: 0% 0%;
}
.text1 {
    -webkit-transform: rotate(-4deg);
       -moz-transform: rotate(-4deg);
        -ms-transform: rotate(-4deg);
            transform: rotate(-4deg);

}
.text3 {
    -webkit-transform: rotate(4deg);
       -moz-transform: rotate(4deg);
        -ms-transform: rotate(4deg);
            transform: rotate(4deg);

}

3D旋转

如果您需要真正的3D透视图（例如，文本的一端大于另一端），则跨浏览器的管理将更加困难。问题中的模型似乎没有3D透视图。

关于html - 如何在HTML中围绕圆形创建透视图文本？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/15799428/