-11

我想在一个圆圈上写一些文字（我的意思是，文字不会是水平的，但每个字母都会有不同的方向）。可以使用html和css吗？谢谢！

4

2 回答 2

3

没有任何超级简单的标准化方法可以在圆形（或任何类型的曲线）上设置网页类型。但这是可以完成的！我们将在这里探索一种方法。但请注意，我们将使用一些 CSS3 和 JavaScript，而不是对不支持某些必需技术的旧浏览器进行两次抨击。如果您对实际项目对此感兴趣，那么最好使用带有适当替代文本的图像，或者适当的特征检测，可以在可以处理它的浏览器中为这种奇特的技术翻转图像。感谢 css-tricks.com

演示

下载文件

文档

HTML

<h1>
  <span class="char1">E</span>
  <span class="char2">s</span>
  <span class="char3">t</span>
  <span class="char4">a</span>
  <span class="char5">b</span>
  <!-- you get the idea -->
</h1>

CSS

h1 span {
  font: 26px Monaco, MonoSpace;
  height: 200px;
  position: absolute;
  width: 20px;
  left: 0;
  top: 0;
  transform-origin: bottom center;
}

.char1 { transform: rotate(6deg); }
.char2 { transform: rotate(12deg); }
.char3 { transform: rotate(18deg); }
/* and so on */

这里有一个超级演示

于 2013-05-14T12:32:28.360 回答
1

你可以，但你最终将不得不做一些主要的数学来实现你的目标。您将希望使用以下 CSS 作为起点。

.rotate {

/* Safari */
-webkit-transform: rotate(-90deg);

 /* Firefox */
 -moz-transform: rotate(-90deg);

  /* IE */
 -ms-transform: rotate(-90deg);

 /* Opera */
-o-transform: rotate(-90deg);

/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

}

来自 css-tricks.com

于 2013-05-14T12:32:01.107 回答