• 技术文章 >web前端 >css教程

    css如何使文字方向转90度

    醉折花枝作酒筹醉折花枝作酒筹2021-05-20 17:06:24原创2128

    css中可以使用transform属性使文字方向转90度,语法格式为“transform: rotate(90deg)”。transform属性表示元素应用2D或3D转换,当值为rotate时为旋转,正数为顺时针旋转,负数为逆时针旋转。

    本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

    <!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);
                /* Internet Explorer 9*/
                -moz-transform: rotate(90deg);
                /* Firefox */
                -webkit-transform: rotate(90deg);
                /* Safari 和 Chrome */
                -o-transform: rotate(90deg);
                /* Opera */
            }
        </style>
    </head>
    
    <body>
        <p class="box">123</p>
    </body>
    
    </html>

    效果:

    原效果:

    推荐学习:css视频教程

    以上就是css如何使文字方向转90度的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:css 旋转
    上一篇:css如何设置下划线的颜色 下一篇:5个你已经可以尝试的css新特性
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【腾讯云】年中优惠,「专享618元」优惠券!• css中怎么把文字加粗• css中文字超出div怎么办• css怎么更改字体• css如何设置下划线的颜色• jquery中怎么修改css样式
    1/1

    PHP中文网