WEB教程基地:www.91ctc.com为你搭建学习WEB技术的优秀平台
网站地图 加入收藏 设为首页
您的位置:本站首页>>网页设计制作技巧>>巧妙使用CSS实现英文单词逆时针旋转90度效果

巧妙使用CSS实现英文单词逆时针旋转90度效果

[ 录入者:91ctc | 时间:2015-07-19 20:44:27 | 作者: 91ctc| 来源:本站原创 | 浏览: 次 ]

先给一个文字排版效果:

巧妙使用CSS实现英文单词逆时针旋转90度效果

这种文字排版效果,相当于逆时针旋转了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文档里,看着多累啊。

PS:如果您对本文有纠错、质疑、转载、举报等问题时,请加入到网站Q&Q&群:86783981(验证信息:91ctc.com)提交您的问题,让大伙一块讨论。谢谢您的支持,计算机教程中心网将会一如既往的提供优秀资源助您一臂之力!
关闭】【返回顶部

下一篇:没有了!
您可能感兴趣的文章
91ctc.com 网络先锋,引领科技,本站原创作品[转载请注明出处]。网站Q&Q&群:86783981(验证信息:91ctc.com)
Copyright© 2010-2017 计算机教程中心网 . All rights reserved. 苏ICP备11081842号