Question

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

我试图得到它，所以黄色包含的块被固定在屏幕的左边，所以我可以改变这个黄色包装的左边（％或vw）的距离。

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

我不能为我的生活让它坚持到左边 - 变换似乎使一切变得更加艰难。我需要它，以便即使窗口调整大小，它仍然保持从最左边的设置％（或vw） - 为了参数，说5％/ 5vw。

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

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

＆＃13;

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}

＆＃13;

<!-- 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>

＆＃13;

Answer 1

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

＆＃13;

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}

＆＃13;

<!-- 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>

＆＃13;

Answer 2

您可以在left上使用#wrapper，如下所示：

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

Answer 3

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

为什么你还需要呢？

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

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

3 个答案: