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

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

我试图得到它，这样黄色的包含块被固定在屏幕的左侧，这样我就可以改变这个黄色包装器离左侧（%或vw）的距离

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

我一辈子都无法让它靠左——这种转变似乎让一切变得更加困难。我需要它，这样即使窗口被调整大小，它也会保持在最左边的一个集合%（或vw）-为了参数起见，可以说是5%/5vw

另外，我之所以使用SVG文本，是因为它是剪辑路径动画的一部分，但为了便于阅读，我删除了这段代码

代码笔：

正文{
保证金：0；
显示器：flex；
证明内容：中心；
对齐项目：居中；
宽度：100%；
高度：100vh；
位置：相对位置；
}
#包装纸{
显示器：flex；
宽度：25%；
证明内容：中心；
背景：黄色；
变换：旋转（-90度）；
位置：绝对位置；
}
#包装svg{margin:1rem}
文本{font size:1rem}

一些文本1
一些文本2
一些文本3

您可以在

#包装上使用
left
，如下所示：

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

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


正文{
保证金：0；
/*显示器：flex；
证明内容：中心；
对齐项目：居中*/
宽度：100%；
高度：100vh；
位置：相对位置；
}
#包装纸{
显示器：flex；
证明内容：中心；
背景：黄色；
变换：旋转（-90度）平移（-100%，0）；
变换原点：左上；
位置：绝对位置；
顶部：0px；
左：0px；
}
#包装svg{margin:1rem}
文本{font size:1rem}

一些文本1
一些文本2
一些文本3
如果我正确理解了问题，则删除
正文
元素上的
justify content:center
就足够了

你为什么还需要它呢

如果
justify content
被删除，那么您可以使用
填充（-left）
将包装器移动到屏幕中央
您的问题是什么？不，这不起作用我已经尝试过了。我需要能够将其固定到最左边，然后添加%值。这样做只是意味着左：0的值不在最左边，所以5%只是增加了额外的值。是的，我知道，但我只是告诉你，你可以使用左移动我想你也要求了一个百分比，所以很明显0是左哦哇。。。值为“left:5%”是否会将元素向左移动5%？哇！谢谢你澄清这一点。作为一个互联网用户，我真的非常感激。嗨@bsk，这几乎可以用，但是当我缩小窗口时，文本元素就消失了。我删除了导致包装器元素出现这种情况的宽度：25%，但随后布局再次中断。这应该对你有用了。谢谢@BSK。真的很感激。很高兴我能帮上忙！