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写法怎么优化

html中图片显示方式-----img与background的区别

css 什么是相对长度单位

css如何把背景旋转

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




打赏

取消

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

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

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

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

评论

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