css - 侧面带有垂直标题的CSS内容

我将可变高度的CSS框设置为浮动在较大的div内。
现在，我想添加一个标题，该文本在框的左侧垂直显示（旋转90度），如下面的链接所示（抱歉，尚无法发布图片）。

http://imageshack.us/photo/my-images/259/cssquestion.png

到目前为止，我已经尝试了一切，但是没有运气。我假设我需要在“包装器” div中制作两个div（“标题”和“内容”），但是无论我在标题div上使用的任何位置设置都显得完全错误。

CSS完全有可能吗？还是我必须使用一些JS来动态生成“ title”和“ content”的高度对齐？

谢谢，
尼古拉斯

最佳答案

http://jsfiddle.net/3r2Sk/1/

您需要的主要代码是

-webkit-transform: scale(1) rotate(270deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
-moz-transform: scale(1) rotate(270deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
-ms-transform: scale(1) rotate(270deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
-o-transform: scale(1) rotate(270deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
transform: scale(1) rotate(270deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);

遇到各种定位问题，旋转元素可能会有些挑剔。大多数位置，宽度和高度都必须适应您的特定情况。最好从头开始，仅复制转换代码。使用上面的链接作为参考。