一.效果图
![[外链图片转存失败(img-3WQIqM33-1567050923711)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1567045250719.png)]](https://img-blog.csdnimg.cn/20190829115709335.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pbG9nZW5pdXM=,size_16,color_FFFFFF,t_70)
二.相关代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>旋转文字</title>
<style type="text/css">
div{
-webkit-transform:rotate(-90deg);
-moz-transform:rotate(-90deg);
-o-transform:rotate(-90deg);
-ms-transform:rotate(-90deg);
//负数代表逆时针旋转
transform:rotate(-90deg);
}
</style>
</head>
<body>
<div>这是一段旋转过的文字</div>
</body>
</html>
三.名词释义
3.1
- ms代表【ie】内核识别码
- moz代表火狐【firefox】内核识别码
- webkit代表谷歌【chrome】/苹果【safari】内核识别码
- o代表欧朋【opera】内核识别码
3.2
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
更多知识点参考transform
