将（CSS Rotated）元素对齐到其容器的左侧 - HTML / CSS答案

【问题标题】：Align (CSS Rotated) Element to left of its container - HTML / CSS将（CSS Rotated）元素对齐到其容器的左侧 - HTML / CSS
【发布时间】：2018-03-22 18:45:21
【问题描述】：

我在一个包装器元素中有一系列 3 个 SVG 元素，并且我使用 CSS 变换将此包装器旋转了 -90 度。

我正在尝试获取它，以便将黄色包含块固定在屏幕左侧，这样我就可以更改这个黄色包装器离左侧多远（% 或 vw）。

我减小了黄色包装元素的大小，以便更容易发现问题。黄色包装纸必须像现在一样保持垂直居中。

我这辈子都不能让它一直靠左——这种转变似乎让一切变得更加困难。我需要它，以便即使调整窗口大小，它也会从最左边保持一个设定的百分比（或 vw） - 为了论证，说 5% / 5vw。

P.S 我使用 SVG 文本是因为它是剪辑路径动画的一部分，但我已删除此代码以使内容更易于阅读。

Codepen：https://codepen.io/emilychews/pen/qojZae

body {
  margin: 0; 
  display: flex; 
  justify-content: center; 
  align-items: center;
  width: 100%; 
  height: 100vh;
  position: relative;
}

#wrapper {
  display: flex;
  width: 25%;
  justify-content: center;
  background: yellow;
  transform: rotate(-90deg);
  position: absolute;
}

#wrapper svg {margin: 1rem}
text {font-size: 1rem}

<!-- THIS IS THE YELLOW BLOCK CONTAINING THE SVG ELEMENTS -->
<div id="wrapper">

  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="120" height="40" viewBox="0 0 120 40">
    <rect class="masker" x="0" y="0" width="120" height="40" fill="red" />
    <text x="16" y="25" fill="white">Some Text 1</text>
  </svg>

  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="120" height="40" viewBox="0 0 120 40">
    <rect class="masker" x="0" y="0" width="120" height="40" fill="red" />
    <text x="16" y="25" fill="white">Some Text 2</text>
  </svg>

  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="120" height="40" viewBox="0 0 120 40">
    <rect class="masker" x="0" y="0" width="120" height="40" fill="red" />
    <text x="16" y="25" fill="white">Some Text 3</text>
  </svg>
  
</div>

【问题讨论】：

你的问题是什么？

标签： html css rotation alignment transform

【解决方案1】：

您可以设置一个变换原点，然后像这样调整变换的偏移量。我还删除了 body 上的 Flex 属性以正确完成此操作。从这一点开始，您可以根据自己的喜好进行调整。

body {
  margin: 0; 
  /*display: flex; 
  justify-content: center; 
  align-items: center;*/
  width: 100%; 
  height: 100vh;
  position: relative;
}

#wrapper {
  display: flex;
  justify-content: center;
  background: yellow;
  transform: rotate(-90deg) translate(-100%, 0);
  transform-origin: left top;
  position: absolute;
  top: 0px;
  left: 0px;
}

#wrapper svg {margin: 1rem}
text {font-size: 1rem}

<!-- THIS IS THE YELLOW BLOCK CONTAINING THE SVG ELEMENTS -->
<div id="wrapper">

  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="120" height="40" viewBox="0 0 120 40">
    <rect class="masker" x="0" y="0" width="120" height="40" fill="red" />
    <text x="16" y="25" fill="white">Some Text 1</text>
  </svg>

  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="120" height="40" viewBox="0 0 120 40">
    <rect class="masker" x="0" y="0" width="120" height="40" fill="red" />
    <text x="16" y="25" fill="white">Some Text 2</text>
  </svg>

  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="120" height="40" viewBox="0 0 120 40">
    <rect class="masker" x="0" y="0" width="120" height="40" fill="red" />
    <text x="16" y="25" fill="white">Some Text 3</text>
  </svg>
  
</div>

【讨论】：

嗨@bsk 这几乎可以工作，但是当我减小窗口大小时，文本元素会消失。我删除了导致包装器元素出现此问题的 width: 25% ，但随后布局再次中断。
嗨@TheChewy，我刚刚更新了我的示例。现在应该对你有用。
感谢@BSK。真的很感激
很高兴能帮上忙！

【解决方案2】：

您可以像这样在#wrapper 上使用left：

#wrapper {
  display: flex;
  width: 25%;
  justify-content: center;
  background: yellow;
  transform: rotate(-90deg);
  position: absolute;
  left: 5%;
}

【讨论】：

不行，我试过了。我需要能够将其固定在最左侧，然后添加 % 值。这样做只是意味着 left:0 值不在最左边，所以 5% 只是为此增加了额外的值。
是的，我知道，但我只是向您展示了您可以使用左键移动我认为您也要求了百分比，所以很明显 0 是左键
哇哦... 'left: 5%' 的值是否会将元素向左移动 5%？哇。感谢您清除它。作为互联网用户，我真的非常感激。

【解决方案3】：

如果我正确理解了这个问题，删除body 元素上的justify-content: center 就足够了。

你为什么还需要它？

如果justify-content 被删除，您可以使用padding(-left) 将您的包装器移动到屏幕中心

【讨论】：