html5中文学习网

您的位置: 首页 > 网页制作 > css教程 » 正文

通过css旋转字体示例代码_CSS教程_CSS_网页制作

[ ] 已经帮助:人解决问题
点评:旋转字体在以前是怎么实现的,我不知道,不过现在可以通过css来轻松实现了,下面有个不错的示例,感兴趣的朋友可以参考下

复制代码
代码如下:
gwVHTML5中文学习网 - HTML5先行者学习网
<html> gwVHTML5中文学习网 - HTML5先行者学习网
<head> gwVHTML5中文学习网 - HTML5先行者学习网
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> gwVHTML5中文学习网 - HTML5先行者学习网
<title>无标题文档</title> gwVHTML5中文学习网 - HTML5先行者学习网
<style type="text/css"> gwVHTML5中文学习网 - HTML5先行者学习网
.mouth{ gwVHTML5中文学习网 - HTML5先行者学习网
font-size:20px; gwVHTML5中文学习网 - HTML5先行者学习网
font-weight:bold; gwVHTML5中文学习网 - HTML5先行者学习网
border:1px solid #F00; gwVHTML5中文学习网 - HTML5先行者学习网
display:block; width:50px; gwVHTML5中文学习网 - HTML5先行者学习网
-webkit-transform: rotate(-90deg); gwVHTML5中文学习网 - HTML5先行者学习网
-moz-transform: rotate(-90deg); gwVHTML5中文学习网 - HTML5先行者学习网
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); gwVHTML5中文学习网 - HTML5先行者学习网
} gwVHTML5中文学习网 - HTML5先行者学习网
</style> gwVHTML5中文学习网 - HTML5先行者学习网
</head> gwVHTML5中文学习网 - HTML5先行者学习网
<body> gwVHTML5中文学习网 - HTML5先行者学习网
<div class="example"> gwVHTML5中文学习网 - HTML5先行者学习网
<span class="mouth">09</span> gwVHTML5中文学习网 - HTML5先行者学习网
</div> gwVHTML5中文学习网 - HTML5先行者学习网
</body> gwVHTML5中文学习网 - HTML5先行者学习网
</html> gwVHTML5中文学习网 - HTML5先行者学习网
(责任编辑:)
推荐书籍
推荐资讯
关于HTML5先行者 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助