沿div设置旋转文本

Question

首先，我想要实现的形象：

此处示例：

http://i.imgur.com/3BpFF.png

其中带有“div”字样的白色框显然是我所拥有的div。出于我的目的，它是使用width:500px; margin: 0 auto;在页面中居中的div。我想要的是能够沿div的 top 对齐一些旋转的文本（使用-moz-transform: rotate(90deg)或者前缀旋转），就像上面的“Holy”一样（示例文本）。我还想在该div上设置基线，尽管它并不重要。

顺便说一句，我在Firebug中使用了一些绝对定位来使文本​​在那里对齐 - 它使用每像素定位进行黑客攻击。它不是很灵活（如果有的话）因为一旦我增加了字体大小或改变了div的位置，它就会被打破。

另外：我愿意使用SASS和其他类似的东西（我还没有任何经验，但我认为它允许使用可能有帮助的变量）。

Answer 1

当您可以使用CSS转换时，这意味着您可以在CSS代码中使用伪元素。然后我将通过:after伪元素添加“Holly”部分。

 div:after{
    content:"Holy";
    line-height:20px;
    position:absolute;
    background:yellow;
    padding:0 10px;
    left:100%; top:0;
    -webkit-transform:rotate(90deg) translateY(-100%);
    -webkit-transform-origin:0 0;
 }

正如你所看到的，我已经使用translateY将这部分移出div，因为我们之前旋转了这个东西，然后translateY将作为translateX。 transform-origin设置为0 0.

此代码与div大小无关。

看看它住在这里：

http://jsbin.com/akaziy/2/

Answer 2

您可以在.css文件中放置这样的内容（margin-top＆amp; margin-bottom只是示例）

div {
    width:500px;
    margin: 0px auto;
}

.holly {
    margin-top:20px;
    margin-left:520px
    /* Safari */
    -webkit-transform: rotate(90deg);

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

    /* IE */
    -ms-transform: rotate(90deg);

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

    /* Internet Explorer 9*/
    -ms-transform: rotate(90deg);

    /*undefined prefix*/
    transform: rotate(90deg);
}