我在浏览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:
使用http://www.boogdesign.com/examples/transforms/matrix-calculator.html
的另一个jsfiddle更新
这是一个基于标记答案的工作解决方案,正是写作模式搞砸了事情: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;
}
答案 0 :(得分:2)
尝试使用此网站为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;}