CSS变换旋转对齐父w/动态宽度

Question

示例：http://mattharris.org/index2.html

在我开始捣乱之前，一切都很好。示例单击3个底部div中的任意一个，您将看到文本不正确地移动。

我做错了什么？

谢谢!

HTML:

<div class="container">
  <div class="header">
    <h1 class="title">MattHarris dot Com</h1>
  </div>
  <div class="sepbar"></div>
  <div class="wrapper">
    <div class="content">
      <div class="box">
        <div class="vertical-text">Skills</div>
      </div>
      <div class="box">
        <div class="vertical-text">Resume</div>
      </div>
      <div class="box">
        <div class="vertical-text">Contact</div>
      </div>
    </div>
  </div>
  <div class="sepbar"></div>
</div>

CSS:

.box {
    width: 33.3%;
    height: 100%;
    float: left;
    font-size: 2em;
    cursor: pointer;
    filter: alpha(opacity=80);
    opacity: 0.8;
}

.vertical-text {
    -ms-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    text-transform: uppercase;
    width: 4%;
}

.box:hover {
    filter: alpha(opacity=100);
    opacity: 1.0;
}

.box:nth-child(1) { background-color: #9dc9d2; }

.box:nth-child(2) { background-color: #a8cfd7; }

.box:nth-child(3) { background-color: #b3d5dc; }

JS:

$(".box").click(function() {
    var link = $(this).text().toLowerCase();
    link = link.replace(/^\s+/, '');
    link = link.replace(/\s+$/, '');
    switch(link) {
        case "skills":
            $(".box:nth-child(1)").animate({width:"92%"});
            $(".box:nth-child(2)").animate({width:"4%"});
            $(".box:nth-child(3)").animate({width:"4%"});
            break;
        case "resume":
            $(".box:nth-child(1)").animate({width:"4%"});
            $(".box:nth-child(2)").animate({width:"92%"});
            $(".box:nth-child(3)").animate({width:"4%"});
            break;
        case "contact":
            $(".box:nth-child(1)").animate({width:"4%"});
            $(".box:nth-child(2)").animate({width:"4%"});
            $(".box:nth-child(3)").animate({width:"92%"});
            break;
    }
});

Answer 1

问题是旋转的元素围绕它们的中心旋转。当元素的宽度发生变化时，中心移动，这就改变了旋转点。

如果你给你的元素一个固定的宽度，而不是一个百分比，这个问题就不会出现。

这是一把小提琴，关键是：

.vertical-text {
    width: 30px;
}

C/tE5Ht/

以下是适用于您的小提琴的解决方案：

C/NQ8a5/1/

Answer 2

还有一种方法，在逻辑上更好地考虑了旋转变换函数。

transform-origin允许您修改元素转换的来源。默认情况下，transform-origin函数的rotate()是旋转中心。

所以你可以用transform-origin: 0 100% 0;把原点放在左边的底部。值为X，Y和Z坐标。在这个解决方案中，您还需要设置一个height和类似的负margin-left (通过转换，它必须是边距顶部)。

CSS节选：

.vertical-text {
    height: 2.2rem;
    margin-top: -2.2rem;
    -webkit-transform: rotate( 90deg );
       -moz-transform: rotate( 90deg );
        -ms-transform: rotate( 90deg );
         -o-transform: rotate( 90deg );
            transform: rotate( 90deg );
    -webkit-transform-origin: 0 100% 0;
       -moz-transform-origin: 0 100% 0;
        -ms-transform-origin: 0 100% 0;
         -o-transform-origin: 0 100% 0;
            transform-origin: 0 100% 0;
    line-height: 2.2rem;
    text-transform: uppercase;
}

和JSFiddle。

我还添加了行高，使文本垂直居中在框中，并将长度值设置为rem，但您可以随意使用像素或环境管理系统。

这个解决方案可能比仅仅设置width要复杂一些，但是您根本不需要关心文本长度和所有框的动态宽度。