没有什么超级简单的通法可以在圆(或任何类型的曲线)上设置css类型。
但这是可以完成的!
我们下面将在这里探索一种实现方法。
但是事先警告,我们将使用一些CSS3和JavaScript,不支持某些必需技术的旧版浏览器(IE7等等) 就请散场了吧。
如果您对一个实际的项目感兴趣,则最好还是使用带有适当alt文本的图像或适当的特征检测来为此类事情提供最好的解决方案,该功能可以在能够处理该问题的浏览器中通过这种技术翻转出图像。
一个例子
让我们继续一些简单的事情。
整个过程
让我们以简单的短语为例:
想象一下,如果我们将要尝试设置的单词围成一个圈,然后将它们分解成单个字母。
通过使用等宽字体,确保每个框的大小均相同。
现在让我们将每个方框放长一些,就像自行车轮辐一样。
然后,我们将所有这些辐条捆扎在一起,以使它们完全重叠。
现在想象一下,我们将那些辐条的末端固定到一个中心枢纽上。我们旋转每个辐条仅比最后一个旋转一点。
如果我们逆时针旋转父元素并删除红色参考线,则圆上会有一些文字!
技术位
为了能够像这样操作每个字母,您必须将它们包装在另一个元素中。
Lettering.js可以轻松为您做到这一点(jQuery和插件依赖性)。
所以你有这个。
<h1>Established 2012</h1>
您加载jQuery和Lettering.js,然后调用此代码:
$("h1").lettering();
并在DOM中变成了这样:
<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>
这实际上仅适用于等宽字体。即使通过将每个跨度设置为固定的来强制等距,每个字母之间的间距也将是错误的,并且看起来会很奇怪。如果您是疯子,可以通过手动调整每个旋转来手动调整它。
对于每个跨度,您想要设置高度,将它们全部放置在同一位置,然后将transform-origin设置在框的底部(以便它们围绕该中心旋转。
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 */
总代码
<style>
.badge {
position: relative;
width: 400px;
border-radius: 50%;
transform: rotate(-50deg);
}
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);
}
.char4 {
transform: rotate(24deg);
}
.char5 {
transform: rotate(30deg);
}
.char6 {
transform: rotate(36deg);
}
.char7 {
transform: rotate(42deg);
}
.char8 {
transform: rotate(48deg);
}
.char9 {
transform: rotate(54deg);
}
.char10 {
transform: rotate(60deg);
}
.char11 {
transform: rotate(66deg);
}
.char12 {
transform: rotate(72deg);
}
.char13 {
transform: rotate(78deg);
}
.char14 {
transform: rotate(84deg);
}
.char15 {
transform: rotate(90deg);
}
.char16 {
transform: rotate(96deg);
}
.char17 {
transform: rotate(102deg);
}
.char18 {
transform: rotate(108deg);
}
.char19 {
transform: rotate(114deg);
}
.char20 {
transform: rotate(120deg);
}
.char21 {
transform: rotate(126deg);
}
.char22 {
transform: rotate(132deg);
}
.char23 {
transform: rotate(138deg);
}
.char24 {
transform: rotate(144deg);
}
</style>
<div id="page-wrap">
<div class="badge">
<h1>Established 2012</h1>
</div>
</div>
<script>
$(function() {
$("h1").lettering();
});
</script>
但是,这可能会变得很无聊而混乱。与Sass和Compass相比,它具有三个方面的优点:
@for $i from 1 through 100
.char#{$i}
+transform(rotate(($i*6)+deg))
更新
这是克里斯·埃普斯坦(Chris Eppstein)的Sass(.sass)mixin ,用于更扩展的文本旋转mixin:
=rotated-text($num-letters: 100, $angle-span: 180deg, $angle-offset: 0deg)
$angle-per-char: $angle-span / $num-letters;
@for $i from 1 through $num-letters
.char#{$i}
+transform(rotate($angle-offset + $angle-per-char * $i))