将（CSS 旋转）元素与其容器的左侧对齐 - HTML / CSS

Question

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

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

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

我这辈子都无法让它坚持到左边 - 转换似乎让一切变得更加困难。我需要它，以便即使调整 window 的大小，它也能从最左边保持一个设定的 %（或 vw）——为了论证，说 5% / 5vw。

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

代码笔：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>

Answer 1

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

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

Answer 2

您可以设置变换原点，然后像这样调整变换的偏移量。我还删除了 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>

Answer 3

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

为什么你在那里需要它？

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

将（CSS 旋转）元素与其容器的左侧对齐 - HTML / CSS

Align (CSS Rotated) Element to left of its container - HTML / CSS

html

css

transform

rotation

alignment