一.效果图
二.相关代码
<!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