巧妙使用CSS实现英文单词逆时针旋转90度效果
[ 录入者:91ctc | 时间:2015-07-19 20:44:27
| 作者: 91ctc| 来源:本站原创
| 浏览: 次 ]
先给一个文字排版效果：
这种文字排版效果，相当于逆时针旋转了90度，直接给代码：
.rotate-style {
font-size:30px;
font-family:Arial, Helvetica, sans-serif;
/* Safari */
-webkit-transform: rotate(-90deg);
/* Firefox */
-moz-transform: rotate(-90deg);
/* Internet Explorer 滤镜写法*/
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}HTML部分：
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>文字逆时针旋转90度-www.91ctc.com</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="rotate-style">www.91ctc.com</div> </body> </html>
注意，这种效果虽然很有意思，但是，浏览器兼容性不好，使用的时候请谨慎。写一大堆<!--[if IE]>这类标签在HTML文档里，看着多累啊。
{xiangguan_list}
推荐文章
热门文章