css如何使文字方向转90度


本文摘自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);

            /* 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实现轮播图效果(附代码)

使用css实现圆角渐变边框

css如何实现下拉菜单

css实现三角的原理

css如何取消下划线

css如何剪切元素??clip属性的使用

css counter-increment属性怎么用

css选择器可以插入图片吗

2021年值得了解的10 个 css 功能(分享收藏)

更多相关阅读请进入《css》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...