html - 将(CSS 旋转)元素与其容器的左侧对齐 - HTML/CSS

Question

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

我正在尝试获取它，以便将黄色包含 block 固定到屏幕左侧，这样我就可以更改这个黄色 wrapper 距左侧的距离(% 或 vw)。

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

我这辈子都无法让它坚持到左边 - 转变似乎让一切变得更加困难。我需要它，以便即使调整窗口大小，它也能从最左边保持一个设定的 %(或 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

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