如何将标题旋转 270 度？答案

【问题标题】：How can i rotate a title 270 degrees?如何将标题旋转 270 度？
【发布时间】：2013-08-07 23:11:36
【问题描述】：

我有一个网站，我想将标题旋转 270 度！我看过很多其他关于此的帖子，但它们似乎对我不起作用！下面是我要旋转的项目的代码！我在哪里放代码，我放什么？我想把它放在这段代码中！这是该文本的整个片段！

/* LOGO CSS*/
#logo_index_text a,
#logo_index_left a,
.logo_permalink_page
{
font-weight: {text:Weight Logo Index};
font-family: {font:Font Logo};
color: {color:Text Logo};
}
#logo_index_left{left:{text:Position Logo Left}}
#logo_index_left {top:{text:Position Logo Top}}
#logo_index_text a, 
#logo_index_left a
{
letter-spacing: {text:LetterSpacing Logo};
font-size: {text:FontSize Logo Index};
line-height: {text:LineHeight Logo}
}
{block:IfNotLogoOpacityonHover}
#logo_index_text a:hover, 
#logo_index_left a:hover{
opacity: 1 !important}
{/block:IfNotLogoOpacityonHover}
.logo_permalink_page{font-size: {text:FontSize Logo Perma}}

我试过的代码是：

-moz-transform: rotate(270deg);
-moz-transform-origin: 50% 50%;
-webkit-transform: rotate(270deg);
-webkit-transform-origin: 50% 50%;

和

-moz-transform: rotate(7.5deg);  /* FF3.5+ */
-o-transform: rotate(7.5deg);  /* Opera 10.5 */
-webkit-transform: rotate(7.5deg);  /* Saf3.1+, Chrome */

和

-webkit-transform: rotate(320deg);
-moz-transform: rotate(320deg);   
-o-transform: rotate(320deg);

提前感谢您的帮助！ :)

【问题讨论】：

“标题”是什么意思？只是您页面上的一些文字？另外，你可能想用感叹号来冷却它......
我实际上几乎看不懂你的任何 LogoCss - 你能把这个放在一边吗？
我没有编码这个。但是现在已经找到了解决办法。不管怎么说，还是要谢谢你！ :D

标签： html css rotation transform tumblr

【解决方案1】：

这是最简单的起点。对我来说，您的主要 logocss 似乎有点乱，但请记住，您需要有 display: block 才能旋转任何东西。

小提琴：http://jsfiddle.net/jjBGz/3/

【讨论】：

乐于助人。（当你得到正确答案时，检查“正确答案检查”并投票。这对我、你和社区的其他人都有好处。

【解决方案2】：

如果你有背景，Beeth 的方法就行不通…… 这是真正的诀窍：
秘诀是在原始元素上设置了vertical-lr，因此宽度和高度已经正确。然后你所要做的就是将文本旋转 180 度，以 transform-origin 为中心...

在 Chrome 和 Firefox 以及 IE 11 和 10 中工作（根据 MDN 向后兼容 IE9，但由于 ms-transform-rotate 不能正常工作，它会优雅地降级为仅在 IE9 中写入模式 vertical-lr，如果您省略 ms-transform)。

https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation
https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode#Browser_compatibility
https://msdn.microsoft.com/en-us/library/ms531187(v=vs.85).aspx

例子：

.blackhd
{
    vertical-align: bottom;
    width: 40px;
    #height: 100px;
    border: 1px solid hotpink;
    background-color: black;
    text-align: center;
}

.vert
{
    display: inline-block;
    color: white;
    #font-weight: bold;
    font-size: 15px;
    writing-mode: vertical-lr;
    #writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    transform-origin: center;
    transform: rotate(180deg);
    padding-top: 2mm;
    padding-bottom: 3mm;
}


<table>
    <tr>
        <td class="blackhd"><span class="vert">abc</span></td>
        <td class="blackhd"><span class="vert">defghijkl</span></td>
    </tr>
    <tr>
        <td>abc</td>
        <td>defghijklmnopqr</td>
    </tr>
</table>

【讨论】：