Question

我在浏览Chrome和IE（11.0）时遇到问题。在IE中，文本旋转180度和360度而不是90度和270度。

这是我测试过的CSS风格（等等）：

.rot90 {
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -ms-transform:rotate(90deg);
    -o-transform:rotate(90deg);
    transform:rotate(90deg);

    -webkit-transform-origin: 0px 0px;
    -moz-transform-origin: 0px 0px;
    -ms-transform-origin: 0px 0px;
    -o-transform-origin: 0px 0px;
    transform-origin: 0px 0px;

    border: 0px solid;
    white-space: nowrap;
    position:absolute;
    display:inline-block;

    padding-bottom: 5px;

    writing-mode: tb-rl;
}

.rot270 {
    -webkit-transform:rotate(270deg);
    -moz-transform:rotate(270deg);
    -ms-transform:rotate(270deg);
    -o-transform:rotate(270deg);
    transform:rotate(270deg);

    -webkit-transform-origin: 0px 0px;
    -moz-transform-origin: 0px 0px;
    -ms-transform-origin: 0px 0px;
    -o-transform-origin: 0px 0px;
    transform-origin: 0px 0px;

    border: 0px solid;
    white-space: nowrap;
    position:absolute;
    display:inline-block;

    padding-bottom: 5px;

    writing-mode: tb-rl;
}

我需要变换原点为：0px 0px。

这是一个jsfiddle：

https://jsfiddle.net/wonc4px9/2/

使用http://www.boogdesign.com/examples/transforms/matrix-calculator.html

的另一个jsfiddle

https://jsfiddle.net/wonc4px9/5/

更新

这是一个基于标记答案的工作解决方案，正是写作模式搞砸了事情：https://jsfiddle.net/wonc4px9/6/

.rot90 {
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.00000000, M12=-1.00000000, M21=1.00000000, M22=0.00000000,sizingMethod='auto expand')";
    filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.00000000, M12=-1.00000000, M21=1.00000000, M22=0.00000000,sizingMethod='auto expand');
    -moz-transform:  matrix(0.00000000, 1.00000000, -1.00000000, 0.00000000, 0, 0);
    -webkit-transform:  matrix(0.00000000, 1.00000000, -1.00000000, 0.00000000, 0, 0);
    -o-transform:  matrix(0.00000000, 1.00000000, -1.00000000, 0.00000000, 0, 0);

    -ms-transform:rotate(90deg);

    -webkit-transform-origin: 0px 0px;
    -moz-transform-origin: 0px 0px;
    -ms-transform-origin: 0px 0px;
    -o-transform-origin: 0px 0px;
    transform-origin: 0px 0px;

    border: 0px solid;
    white-space: nowrap;
    position:absolute;
    display:inline-block;

    padding-bottom: 5px;
}

.rot270 {

    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=-0.00000000, M12=1.00000000, M21=-1.00000000, M22=-0.00000000,sizingMethod='auto expand')";
    filter: progid:DXImageTransform.Microsoft.Matrix(M11=-0.00000000, M12=1.00000000, M21=-1.00000000, M22=-0.00000000,sizingMethod='auto expand');
    -moz-transform:  matrix(-0.00000000, -1.00000000, 1.00000000, -0.00000000, 0, 0);
    -webkit-transform:  matrix(-0.00000000, -1.00000000, 1.00000000, -0.00000000, 0, 0);
    -o-transform:  matrix(-0.00000000, -1.00000000, 1.00000000, -0.00000000, 0, 0);

    -ms-transform:rotate(270deg);

    -webkit-transform-origin: 0px 0px;
    -moz-transform-origin: 0px 0px;
    -ms-transform-origin: 0px 0px;
    -o-transform-origin: 0px 0px;
    transform-origin: 0px 0px;

    border: 0px solid;
    white-space: nowrap;
    position:absolute;
    display:inline-block;

    padding-bottom: 5px;
}

Answer 1

尝试使用此网站为IE生成CSS规则。Matrix Calculator

在答案部分，它解释了如何使用它以及为什么需要它。

看起来像这样：

.rot90 {
-ms-filter:"The rule you get from the website"
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-ms-transform:rotate(90deg);
-o-transform:rotate(90deg);
transform:rotate(90deg);

-webkit-transform-origin: 0px 0px;
-moz-transform-origin: 0px 0px;
-ms-transform-origin: 0px 0px;
-o-transform-origin: 0px 0px;
transform-origin: 0px 0px;

border: 0px solid;
white-space: nowrap;
position:absolute;
display:inline-block;

padding-bottom: 5px;

writing-mode: tb-rl;}

CSS跨浏览器文本轮换

1 个答案: