通过CSS实现文字旋转

AloneDonkey 2009-07-30

除了利用CSS实现文字旋转外,还可以使用图片精灵(Image Sprite)和少量用来准确定位的CSS。但这个量可能并不少。这就像摇胡椒罐一样,弄不好就会突然在食物上撒上一大坨胡椒,让你喷嚏连天。

幸运的是,如今很多主流浏览器都支持旋转HTML元素的功能。这样会更好吗?我可以让他在IE(甚至是IE5.5版本)上使用。你想问什么?好,我们先来看一下HTML。

<div class="example-date"> 



  <span class="day">31span>   




  <span class="month">Julyspan>   




  <span class="year">2009span> 




div> 

这段代码没有太多额外的累赘,很是干净漂亮。我谨慎地选择了我所使用的日期顺序,避免了使用逗号。否则的话,还得使用一个额外的span来从最终的设计中移除逗号。

神奇的CSS

对于Webkit和Firefox(从3.5版本起),你可以利用提案中的transform属性来处理旋转。目前,每种浏览器都需要为该属性增加前缀。

-webkit-transform: rotate(-90deg);

-moz-transform: rotate(-90deg);

In order to perform a transformation, the element has to be set to display:block. In this case, just add the declaration to the span that you want to rotate.

为了执行变换,元素必须设置为display:block。在这里,只为需要旋转的span添加了声明。

在提到Internet Explorer中的效果时,我不得不说,使用过滤器可以实现异常强大的功能(但很多还没有开发出来)。其中一个称作BasicImage的过滤器――这个名字可能有点误导人――能够旋转任何具有布局的元素。

BasicImage过滤器的rotation属性能够接受以下四个值之一――0、1、2或3,对应着将元素旋转0、90、180或270度。

BasicImage过滤器还具有其他一些可供设置的属性,如mirroring、masking、greyscale等等。另外,你还可以利用Matrix过滤器,但这些坐标对我来说没有任何意义。

CSS实现文字旋转实际效果

相关推荐

aSuncat / 0评论 2020-08-18