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

Question

我必须在其菜单和内容上做一些带有一些透视文本的网页。以下是我应该实现的效果图像的链接。可能吗？从哪儿开始？我很笨，甚至不知道什么是最好的。我感谢任何帮助。

http://goo.gl/Wlz5b

Answer 1

旋转文字

如果您只需要旋转文本元素，可以使用{3}} 2D-transform使用CSS3完成。

支持IE8及更早版本需要使用rotation（以及一些额外的工作来正确定位文本）。

IE matrix filter

<强> 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视角。