0

我有一个 div （选项卡），我像这样旋转 270 度：

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

（这里的例子：http: //users.telenet.be/prullen/align.html）

当我想将选项卡与内容框的顶部边缘对齐时，这很容易。我只是将“顶部”设置为“3px”（边框大小）。然而，对于底部，它是另一个故事。

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

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

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

在此处输入图像描述

我想知道是否有更好的方法，因为这在 Firefox 中似乎效果不佳，例如（1 个像素偏移）。是否有更简单的方法通过调整变换原点？

（请注意，我需要保持与现在相同的 div 结构）

理想情况下，它就像设置底部一样简单：3px（边框厚度）

谢谢。

4

1 回答 1

0

当您想将选项卡放在粘性顶部时，将类.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。

于 2013-09-04T02:08:05.697 回答