html Transform 用 div 旋转 90 度答案

【问题标题】：html Transform rotate 90 deg with divhtml Transform 用 div 旋转 90 度
【发布时间】：2016-02-11 05:33:27
【问题描述】：

我添加了几个 div 以使父 div 中的最后一个 div 出现在父 div 的右侧但旋转 90 度。但是我的内容被推出了 div。以下是目前为止的代码：

 <div style="width:20px; float: right; margin: 0; padding: 0;  ">
  <div style="margin: 5px 5px 5px 0; vertical-align:bottom;">
   <div style="transform: rotate(90deg); vertical-align: bottom;margin-bottom: 0;left:0; font-size: 8px; width: 56px ; height: 55px">
                        TESTING NOW
                    </div>
                </div>
            </div>

【问题讨论】：

你能在jsfiddle.net上创建一个测试用例吗？

标签： html css css-transforms

【解决方案1】：

问题是您的内部 div 比外部 div 大并且伸出边缘。然后，当您旋转内部 div 时，默认情况下它围绕其中心旋转，因此顶部的文本向右旋转。

您可以更改相对尺寸和位置以进行补偿。或者，您可以应用 transform-origin 来告诉浏览器旋转（例如）左上角：

<div style="width:20px; float: right; margin: 0; padding: 0;  ">
  <div style="margin: 5px 5px 5px 0; vertical-align:bottom;">
    <div style="transform-origin: 0 0 0; transform: rotate(90deg); vertical-align: bottom;margin-bottom: 0;left:0; font-size: 8px; width: 56px ; height: 55px">
      TESTING NOW
    </div>
  </div>
</div>

或者（根据您的评论中的要求）您可以使用display: flex; align-items: flex-end 将您的文本与 div 的底部对齐（请注意，在此示例中，div 仍然溢出，这可能是也可能不是问题，具体取决于其余部分你的 CSS）。

<div style="width:20px; float: right; margin: 0; padding: 0;  ">
  <div style="margin: 5px 5px 5px 0; vertical-align:bottom;">
    <div style="display: flex; align-items: flex-end; transform: rotate(90deg); vertical-align: bottom;margin-bottom: 0;left:0; font-size: 8px; width: 56px ; height: 55px">
      TESTING NOW
    </div>
  </div>
</div>

【讨论】：

谢谢，你知道如何垂直对齐文本以显示在最里面的 div 的底部吗？常规对齐不会改变它。我同意你对尺寸的评估。
@Sue 查看更新的答案 - 您可以在最里面的 div 上使用 display: flex; align-items: flex-end

【解决方案2】：

试试这个：

<div style="float: right; margin: 0; padding: 0;  ">
  <div style="width: 60px;">
     <div style="font-size: 8px; transform: rotate(90deg); margin-top: 26px;">
        TESTING NOW 
     </div>
  </div>
</div>

其中最里面的“margin-top”=（父级的宽度-字体大小）/2

【讨论】：

感谢您的代码。但是 div 的内容仍然被推出，这是我添加到您的代码中的内容

现在测试
如果它工作得很好。但我宁愿使用stackoverflow.com/users/1469259/cupawntae 给你的解决方案：用'transform-origin: 0'定义旋转中心

【解决方案3】：

不要在父 DIV 中使用 float: right;，这会在旋转时将最里面的 DIV 推出

相反，将 100% 的宽度分配给最外层的父 DIV，在旋转的 DIV 元素之前添加一个 DIV 元素，并分配您想要的左侧元素的宽度并在最内层使用 float:right

编辑：

这段代码应该做你想做的事。你可以随意调整宽度来得到你想要的：

<div style="width:100%;  margin: 0; padding: 0;  ">
<div style="width:90%;  margin-right: 5px; padding: 0;  ">
</div>
<div style="float: right;transform: rotate(90deg); vertical-align: bottom;margin-bottom: 0;left:0; font-size: 8px; width: 56px ; height: 55px">TESTING NOW
</div>
</div>

【讨论】：

感谢 Abhay，但出于某种原因，这会将我的 div 推到父 div 的左侧

【解决方案4】：

我使用了转换原点，我发布了我的答案，它可以帮助其他人寻找它

 <div style="width:20px;height: 100%; float: left; margin: 0; padding: 0; background-color: lightgrey; ">
            <div style="margin: 5px 5px 5px 0;">
                <div style="transform: rotate(-90deg); font-size: 9px; width: 70px ; height: 55px;text-space: 5px; ">
                    Testing Testing
                </div>
            </div>
        </div>

【讨论】：