旋转元素彼此重叠

Question

有没有办法解决这个问题，当我旋转2个元素时，它们会相互重叠，因为宽度和高度不会互换。

谢谢

https://jsfiddle.net/aez4uc3u/

＆＃13;

＆＃13;

a {
  display: block;
  transform: rotate(-90deg);
}

＆＃13;

<div>
  <a href="#">This is the first link</a>
  <a href="#">This is the second link</a>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

旋转父级。

a {
  display: block
}

div {
  transform: rotate(-90deg);
}

<div>
  <a href="#">This is the first link</a>
  <a href="#">This is the second link</a>
</div>

根据您的喜好定位div将进行其他转换，并可能调整transform-origin属性。

你也应该意识到transform 纯粹视觉。 不实际上会影响元素的定位或边距。

Answer 2

旋转容器并显示子项，因为.container { transform: rotate(-90deg); } .container a { display:inline-block; margin: 0 5px; }似乎可以解决问题。

<div class="container">
    <a href="#">This is the first link</a>
    <a href="#">This is the second link</a>
</div>

{{1}}