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

使用此代码：

<div id='left_column_date_search'>
<a href='#'><span>Dnes</span></a>
<a href='#'><span>Zítra</span></a>
<a href='#'><span>Pátek</span></a>
<a href='# '><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; }
#left_column_date_search a.a3 { height: 100px !important; }
#left_column_date_search a.a4 { height: 100px !important; }
#left_column_date_search a.a5 { height: 100px !important; }
#left_column_date_search a.a6 { height: 100px !important; }
#left_column_date_search a.a7 { height: 100px !important; }

#left_column_date_search a span {
    display: block;
    -webkit-transform: rotate(270deg);  
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    transform: rotate(270deg);  
    position: absolute;
    top: 0px; 
    left: 0px;
}

但我得到的是：

有什么建议？

这是我的解决方案.我已经更新了你的HTML和CSS以允许这个.这是一个实例： http://jsfiddle.net/8RTaV/4/

HTML：

<div id='left_column_date_search'>
    <a href='#'>Dnes</a>
    <a href='#'>Zítra</a>
    <a href='#'>Pátek</a>
    <a href='#'>Sobota</a>  
</div> <!-- end: #left_column_date_search -->

CSS：

#left_column_date_search {
    background: #000;
    width: 36px;
    float: left;
}
#left_column_date_search a {
    display: block;
    height: 60px;
    width: 60px;
    color: #fff;
    text-shadow: 1px 0px 0px #000;
    text-decoration: none;
    line-height: 31px;
    margin: 5px 0 0;
    text-align: center;
}
#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{
    -webkit-transform: rotate(270deg);  
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    transform: rotate(270deg); 
}

我使用下面的css旋转表格标题单元格内的文本，但标题单元格的宽度，就像文本是水平的。我如何旋转文本，宽度会自动减少..

table#MyTable tr th a{
    color: #FFFFFF;
    display: block;
    /*Firefox*/
    -moz-transform: rotate(-90deg);
    /*Safari*/
    -webkit-transform: rotate(-90deg);
    /*Opera*/
    -o-transform: rotate(-90deg);
    /*IE*/
    writing-mode: tb-rl;
    filter: flipv fliph;
    padding: 60px 1px;
}

如果你需要调整单元格的宽度，它们只包含一行文本，你可以这样做： http://jsfiddle.net/sSP8W/3/ – 将元素的宽度设置为它的行高。

CSS3变换的问题是它们像CSS’position：relative：它们的原始框保持不变，所以旋转，倾斜等不会导致元素的维度的变化。所以：真的没有完美的CSS解决方案，你可以使用JS来调整尺寸，或尝试找到黑客的解决方法。所以如果你只有一个表中的链接，你可以这样做：http://jsfiddle.net/sSP8W/4/ – 旋转表本身。

如果您的案例有其他内容不想轮播，请更新帖子，以便我们可以尝试找到更好的解决方案。

upd：刚刚找到了一个解决方案在表中旋转的文本：使用一些魔法与垂直paddings我们可以使细胞伸展到内容，所以看看这几乎最后的例子：http://dabblet.com/gist/4072362