Question

I started my code based on this example: https://gist.github.com/aiboy/7406727

I don't want the 90 degree variant but the 270 degree, so reading direction running from bottom to top.

In IE11 the text runs from top to bottom. In Chrome it runs from bottom to top, however, it's then displayed outside the wrapping container.

How can I get this to work in FireFox, Chrome and IE8-IE11?

<style type="text/css">
.text-container {
    float: left;
}

.rotated-text {
    display: inline-block;
    background-color:red;
    width: 1.5em;
}
.rotated-text__inner {
    display: inline-block;
    white-space: nowrap;
    /* this is for shity "non IE" browsers
       that dosn't support writing-mode */
    -webkit-transform: translate(1.1em,0) rotate(270deg);
       -moz-transform: translate(1.1em,0) rotate(270deg);
         -o-transform: translate(1.1em,0) rotate(270deg);
            transform: translate(1.1em,0) rotate(270deg);
    -webkit-transform-origin: 0 0;
       -moz-transform-origin: 0 0;
         -o-transform-origin: 0 0;
            transform-origin: 0 0;
   /* IE9+ */
   -ms-transform: none;
   -ms-transform-origin: none;
   /* IE8+ */
   -ms-writing-mode: tb-rl;
   /* IE7 and below */
   *writing-mode: tb-rl;
}
.rotated-text__inner:before {
    content: "";
    float: left;
    margin-top: 100%;
}
</style>



<div class="text-container">
    <div class="rotated-text"><span class="rotated-text__inner">Easy</span></div>
</div>

Answer 1

我的解决方案不仅仅是CSS，因为它需要一些HTML重构，但我要做的是围绕左上角旋转90º，然后围绕中心旋转内部容器180º。这包括Chrome，Firefox，Safari，看起来你已经知道如何使用IE了。

http://jsfiddle.net/nwduefdz/

HTML：

<div id="outer">
    <div id="inner">Vertical text, bottom to top!</div>
</div>

CSS：

#outer {
    background-color: red;
    color: white;
    line-height: 1em;
    padding: .5em;
    -webkit-transform: translateX(2em) rotate(90deg);
    -moz-transform: translateX(2em) rotate(90deg);
    -ms-transform: translateX(2em) rotate(90deg);
    transform: translateX(2em) rotate(90deg);
    -webkit-transform-origin: 0 0 0;
    -moz-transform-origin: 0 0 0;
    -ms-transform-origin: 0 0 0;
    transform-origin: 0 0 0;
    float: left;
}
#inner {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

Vertical text using pure CSS is inconsistent across browsers

1 个答案: