旋转标签（变换：旋转）定位

Question

到目前为止，这是我目前的代码：

http://jsfiddle.net/VsGMa/2/ 如您所见，标签位置不正确。

这是“横向”版本，可以正常使用：

http://jsfiddle.net/HHg7S/

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

transform-origin现在是0％100％ - 尝试了一堆其他值，但没有运气。

Answer 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/

Answer 2

使用

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

demo

无论选项卡的大小如何，都可以使用。