div 文字 css旋转问题

html-css028

div 文字 css旋转问题,第1张

webkit核心浏览器使用和火狐浏览器使用transform可以做到旋转，IE要使用DXImage滤镜，代码如下：

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 */

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1)

代码如下：

<html>

<head>

    <title>Untitled</title>

    <style>

    .div1 {

        width: 100px

        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 */

        filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1) 

        border:1px solid #4EC83B

    }

    </style>

</head>

<body>

</br>

</br>

</br>

<div class="div1">

我旋转了

</div>

</br>

</br>

</br>

<div style="-ms-writing-mode:tb-rlborder:1px solid #4EC83Bwidth: 30pxheight: 100px">

Hello World!

</div>

</body>

</html>

效果如下：

对于英文，IE还有一种方式，使用-ms-writing-mode，中文只能竖排，不能旋转，英文可以

-ms-writing-mode:tb-rl

一、使用writing-mode搜索属性

语法：writing-mode:lr-tb或writing-mode:tb-rl

参数：

1、lr-tb：从左向右，从上往下

2、tb-rl：从上往下，从右向左

运行代码发现，IE显示正常，火狐却不行，所以不建议使用writing-mode属性，下面使用模拟方法实现。

　二、模拟文字竖排

代码：

ul{width:100pxheight:80pxoverflow:hiddenlist-style:none}

ul li{float:rightdisplay:inlinemargin-left:4pxwidth:14pxheight:100pxfont-size:14pxword-wrap:break-wordword-break:nomal}

此方法让li右浮动，设置li宽度和字宽度一样都是14px，这样就自动换行了。另外，“word-wrap:break-wordword-break:nomal”这句实现标点自动换行（连续字符自动换行）。

实现效果相当于把文字逆时针旋转90度，可用CSS的transform 属性

transform: rotate(-90deg)

-ms-transform: rotate(-90deg)/* Internet Explorer  用360兼容模式测试发现IE9及以下不好使*/

-moz-transform: rotate(-90deg)/* Firefox */

-webkit-transform: rotate(-90deg)/* Safari 和 Chrome */

-o-transform: rotate(-90deg)/* Opera */

自测效果：