0
点赞
收藏
分享

微信扫一扫

CSS - 使用CSS3旋转文本


前言

CSS3提供了一个旋转文本的简单方法。如果项目不需要使用复杂的画布元素,使用transform:rotate属性不失为一个易于实现的解决方案。


准备工作

在HTML文档中写下一行文本。打起精神来,你将使用CSS3旋转这行文本。


实现方式

将文本包裹在段落标签元素中:

CSS - 使用CSS3旋转文本_CSS

然后,添加CSS transform属性来旋转文本。每个浏览器实现旋转的方式都不同,所以需要设置每个浏览器自身唯一的transform属性。然而,每个设置都会使用transform属性的子属性rotate,并且后面紧跟着旋转角度,如下面的代码片段所示:

CSS - 使用CSS3旋转文本_使用CSS3旋转文本_02


工作原理

transform属性可以给元素应用2D或3D变换。除了旋转,其他相应属性还可以实现元素的移动、扭曲以及透明化效果。


举报

相关推荐

0 条评论