如何在 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 透视图。