对齐270度定向div（变换：旋转）

Question

我有一个div（tab），我可以像这样旋转270度：

  -webkit-transform-origin: 100% 0%; 
  -webkit-transform: rotate(270deg);

（例如：http://users.telenet.be/prullen/align.html）

当我想将标签与内容框的顶边对齐时，它非常简单。我只是将“top”设置为“3px”（边框大小）。然而，对于底部而言，这是另一个故事。

看起来我需要用jquery来计算这个：

$tab.css('bottom', (Math.abs($tab.outerWidth()-$tab.outerHeight()) 

（虽然对于这个例子我只是使用一个静态值。它可能看起来不像我想要的在浏览器中，这是一个图像：）

我想知道是否有更好的方法，因为这似乎在firefox中没有那么好用（例如1像素移位）。是否可以通过调整变换原点来实现更简单的方法？

（注意我需要保持我现在拥有的相同div结构）

理想情况下，它就像设置底部一样容易：3px（边框粗细）

感谢。

Answer 1

如果您想将标签放在粘性标题的顶部，请将类.tab-top应用于.sticky-tab元素。

.tab-top {
    transform-origin: 100% 0%;
    transform: rotate(270deg);
    top: 5px; /*Border Size*/
    right: 5px; /*Border Size*/
}

如果要将标签放在粘性的底部，请将类.tab-bottom应用于.sticky-tab元素。

.tab-bottom {
    transform-origin: 100% 100%;
    transform: rotate(270deg) translateX(100%);
    bottom: 0;
    right: -18px; /*Height (appearing as width once rotated) of the tab*/
}

基本上，您希望将变换原点更改为元素的右下角，然后将元素附加到其父元素的底部。这会将元素放在.sticky的正下方。然后使用translateX(100%)强制.sticky-tab的底部与.sticky的底部对齐。