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

Question

我必须做一个网页，在它的菜单和内容上有一些透视文本。以下是我应该达到的效果图像的链接。是否可以？从哪儿开始？我很无能，甚至不知道什么是最好的。感谢您的帮助。

http://goo.gl/Wlz5b

Answer 1

旋转文字

如果您只需要旋转文本元素，可以使用 CSS3 来完成，使用 2D-transform rotation .

支持 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 透视图。