本文摘自PHP中文网,作者醉折花枝作酒筹,侵删。
css中可以使用transform属性使文字方向转90度,语法格式为“transform: rotate(90deg)”。transform属性表示元素应用2D或3D转换,当值为rotate时为旋转,正数为顺时针旋转,负数为逆时针旋转。

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <!DOCTYPE html>
<html lang= "en" >
<head>
<meta charset= "UTF-8" >
<meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
<meta http-equiv= "X-UA-Compatible" content= "ie=edge" >
<title>Document</title>
<style>
.box {
width: 20px;
height: 30px;
transform: rotate(90deg);
-ms-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-o-transform: rotate(90deg);
}
</style>
</head>
<body>
<p class = "box" >123</p>
</body>
</html>
|
效果:
阅读剩余部分
相关阅读 >>
css如何实现蒙版效果
css实现轮播图效果(附代码)
使用css实现圆角渐变边框
css如何实现下拉菜单
css实现三角的原理
css如何取消下划线
css如何剪切元素??clip属性的使用
css counter-increment属性怎么用
css选择器可以插入图片吗
2021年值得了解的10 个 css 功能(分享收藏)
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » css如何使文字方向转90度