1

我基于这个例子开始了我的代码：https ://gist.github.com/aiboy/7406727

我不想要 90 度的变体，而是 270 度，所以阅读方向从下到上。

在 IE11 中，文本从上到下运行。在 Chrome 中，它从下到上运行，但是，然后显示在包装容器之外。

我怎样才能让它在 FireFox、Chrome 和 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>
4

1 回答 1

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);
}
于 2015-04-25T00:20:35.493 回答