Question

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

/* 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);

提前感谢您的帮助！：）

Answer 1

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

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

Answer 2

如果你有背景，Beneth的方法不会起作用...... 这是真正的诀窍：
秘诀是在原始元素上设置vertical-lr，因此宽度和高度已经正确。然后你要做的就是用变换原点中心将文本旋转180度......

适用于Chrome和Firefox以及IE 11＆amp; 10（根据MDN向后兼容IE9，但由于ms-transform-rotate不能正常工作，如果省略ms-transform，它会优雅地降级到IE9中的写入模式vertical-lr）。

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

示例：

as type

如何将标题旋转270度？

2 个答案: