标签: text-rotation

如何在css中旋转文本以获得以下输出...

喜

编辑:

感谢您的快速建议.我在jsfidle中添加了我的示例代码:

http://jsfiddle.net/koolkabin/yawYM/

我面临的问题是,当我们旋转文本时,它会打破对齐和位置......所以导致这种情况的原因以及如何管理它们？

我在div中有一个简单的文本,如下所示;

<div id="banner">
    <div>This is an example text</div>
</div>

我希望div内的文字旋转20-30度.我已经在stackoverflow上找到了关于它的这个主题,它在Firefox和Chrome中给出了我想要的结果,但在IE7,IE8和IE9中没有.我也试过jquery旋转,但是当使用它时,看起来插件正在用div本身做一些事情,使它消失,而不是旋转div内的文本.这有可能与javscript和/或CSS？

注意:Cufon也在使用中.

Codlers回答后更新:

这是Codler回答后的当前应用的css.适用于FF和Chrome.

-ms-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
/*-moz-rotation-point: 0 0;*/
-webkit-transform: rotate(-20deg);
/*-webkit-rotation-point: 0 0;*/
-o-transform: rotate(-20deg);
/*-ms-writing-mode: tb-lr;
* html writing-mode: tb-lr;*/

更新2:IE7和IE8现在正在旋转文本,但在IE9中,我的旋转文本后面有一个大的黑色方块.是什么导致这个？CSS现在如下;

-moz-transform: rotate(-20deg);
-o-transform: rotate(-20deg);
-webkit-transform: rotate(-20deg);
-ms-transform: rotate(-20deg);  
transform: rotate(-20deg);
background-color:transparent;

/*-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.93969262, M12=0.34202014, M21=-0.34202014, M22=0.93969262,sizingMethod='auto expand')";*/
/*filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.93969262, M12=0.34202014, M21=-0.34202014, M22=0.93969262,sizingMethod='auto expand');*/
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.93969262, M12=0.34202014, M21=-0.34202014, M22=0.93969262,sizingMethod='auto expand');
zoom: 1;
z-index:1;

position:absolute;

padding     : 45px 10px 15px 10px;

最终的工作代码.对于Jeff和Codler来说,这是对此的肯定.

HTML:

<div …

我不明白CSS3中的文本旋转是如何工作的.

例如,您可以在此处看到,旋转的文本永远不会在您想要的位置,

right: 0;
bottom: 0;

它总是会有右边的差距/边距.并始终在包含它的框的底部溢出.

我怎样才能解决这个问题？

我可以使用jquery来修复它或任何可靠的jquery插件来进行文本轮换吗？

谢谢.

我正在努力实现这一目标：

使用此代码：

<div id='left_column_date_search'>
<a href='#' class='a1'><span>Dnes</span></a>
<a href='#' class='a2 selected'><span>Zítra</span></a>
<a href='#' class='a3'><span>Pátek</span></a>
<a href='# 'class='a4'><span>Sobota</span></a>              
</div> <!-- end: #left_column_date_search -->



#left_column_date_search { width: 36px; float: left; overflow: hidden;}
#left_column_date_search a { 
    display: block; 
    position: relative;
    color: #fff;
    text-shadow: 1px 0px 0px #000;
    text-decoration: none;
}
#left_column_date_search a.selected {
/*  background: url(/images/structure/city-search-grad-selected.jpg); */
    color: #660000;
    text-shadow: 0px 1px 0px #9e4a4a;
}
#left_column_date_search a:hover {
    background: url(/images/structure/city-search-grad-hover.png);
}
#left_column_date_search a.a1{ height: 73px !important; }
#left_column_date_search a.a2 { height: 73px !important; …

如何在不使用样式表的情况下将文本旋转90度？我在页面的标题区域放置了以下指令：

<style>
div.rotate-text {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
</style>

然后，我将以下内容放在相关段落中。

<div id="rotate-text">
<p>My paragraph</p>
</div>

但是它不起作用，因此是我的问题。

我必须将文本框和一些文本对齐,大约30度,如下所示: 旋转文本http://c3.ort.org.il/Apps/Public/getfile.aspx?inline=yes&f=files/ba3c28fc-8c3e- 46d9-b4f3-effda4c7e27b/92512b48-c566-4a05-a955-39003e9c4b5d/3fd286a7-0a1c-4db6-9308-4fe563f5662b/7b39f5d1-0070-4f8a-a6b1-a588173a4dde.JPG

我希望它至少在IE和FF中工作.
我在网上找到的所有东西都涉及图像旋转.
任何人？

如何在所有浏览器中显示垂直文本(旋转90度)？

alt text http://blogs.sun.com/oootnt/resource/sbres_1164126054_0__.png

我已将TextBlock控件包裹在边框中,这样我就能看到占用空间的东西:

这是XAML:

<Border BorderBrush="Cyan" BorderThickness="3">
    <TextBlock Style="{StaticResource subtitle}" Text="{Binding Title}" >
        <TextBlock.RenderTransform>
            <RotateTransform Angle="90" />
        </TextBlock.RenderTransform>
    </TextBlock>
</Border>

问题是这占用的空间比我需要的多得多,如果我设置一个静态宽度,我得到这个:

有什么建议？

见下图:

正如您在图像中看到的那样,书面文本旋转90度角,我想只旋转文本为水平.通过它旋转的任何角度,我想使其成为水平,如下所示:

我不希望完整的图像旋转.我希望文本只是有界的,测量文本旋转的角度然后旋转该角度使其成为水平.

你能建议我这样做,然后在文本上放一个椭圆吗？

谢谢.