【问题标题】：Rotated Tab (Transform:rotate) Positioning旋转标签（变换：旋转）定位
【发布时间】：2012-10-04 23:45:55
【问题描述】：

这是我目前的代码：

http://jsfiddle.net/VsGMa/2/ 如您所见，选项卡未正确定位。

这是运行良好的“水平”版本：

http://jsfiddle.net/HHg7S/

关于可能出现什么问题或我如何正确对齐的任何想法？

transform-origin 现在是 0% 100% - 也尝试了许多其他值，但都没有运气。

【问题讨论】：

标签： html css css-transforms

【解决方案1】：

试试这个，

<div class="slick-tab slick-tab-270 slick-tab-open" style="background-image: none; background-color: rgb(102, 255, 0); border: 3px solid rgb(0, 0, 0); padding: 0px ! important; -moz-transform-origin: 0% 100%; -moz-transform: rotate(270deg); text-align: center; height: auto; position: absolute; margin-left: -3px; width: 100px; margin-top: 68px;">

只需在此 div 中包含 margin-top:68px;。

查看这个：http://jsfiddle.net/VsGMa/3/

【讨论】：

但是margin-top是从什么计算出来的？我需要能够自动计算必要的边距顶部（通过 js）
您可以在旋转后链接平移变换，请参阅我的回答。

【解决方案2】：

使用

transform-origin: 0 0;
transform: rotate(-90deg) translateX(-100%) translateY(-100%);

demo

无论标签大小如何，都可以使用。

【讨论】：

太好了，非常感谢！了解了有关可链接性的新知识。