CSS变换旋转如何让动态宽度的元素顶部与父元素对齐

Question

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

一切都很好，直到我开始动态移动元素。例如，单击底部的任何一个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;
    }
});

- morissette

---

你应该在问题本身中包含相关代码。这不仅可以更容易地帮助你解决问题，而且在问题被解决后，问题就不再出现在提问中了。 - Zach Saucier

编辑肯定没问题。 - morissette

@morissette，您希望文本位于哪里？是半包含在框内还是完全包含在框内？ - Dennis

不，我希望文本在框内有最小的填充，并且在父级div宽度变化时保持该位置。 - morissette

如果没有看到导致错误的代码，很难解决这个问题。尝试创建一个 JSFiddle 来演示错误。你提供的代码不足以解决问题。 - leigero

Answer 1

问题在于旋转元素是以它们的中心旋转。当元素的宽度改变时，中心点也会移动，从而改变旋转点。

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

这里有一个演示，关键部分如下：

.vertical-text {
    width: 30px;
}

http://jsfiddle.net/John_C/tE5Ht/

这是应用于您的fiddle的解决方案：

http://jsfiddle.net/John_C/NQ8a5/1/

- John_C

---

谢谢。我不应该用赏金来解决这么简单的问题。感谢您的解释，我会在可能的时候给您奖励。 - morissette

谢谢，如果你不知道问题的原因，这样的问题可能会让人沮丧！ - John_C

Answer 2

还有另一种方法，更加符合旋转变换函数的逻辑。

transform-origin 可以修改元素的变换原点。默认情况下，rotate() 函数的 transform-origin 是旋转中心。

因此，您可以使用 transform-origin: 0 100% 0; 将原点放在左下角。值为 X、Y 和 Z 坐标。在此解决方案中，您还需要设置 height 和类似的负 margin-left（通过变换后必须是 margin-top）。

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，但您可以根据需要使用像素或ems。

此解决方案可能比仅设置width更复杂，但您完全不必担心文本长度，并且在所有框上具有动态宽度。

- Volker E.