旋转元素互相重叠

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

谢谢

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

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

2017-06-21 MIkeMo

应该采取什么结果是什么样子？ – j08691

一个在另一个下面 – MIkeMo

@MichaelMorin，下面你的意思是第二个在第一个的右边？ – Chris

旋转父。

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>

定位你可能喜欢将采取额外的转换，或许，调整transform-origin财产股利。

你应该也知道，transform是纯粹是 visual。它的确如此，而不是实际上影响元素的定位或边界。

2017-06-21 15:24:24

我想知道你是否可以在div上执行'inline-block'，并使用不同的'transform-origin'将它放在左上角。我只能把它放在最左或最远的位置，但不能同时放在两个位置。 – Chris

这不完全是我想要做的。让我们在这里添加一个上下文，我在我的网站上有一个50px的侧边栏，其中包含角度为-90度的标签。问题是，在我旋转我的标签后，它们都相互重叠，并且它们很难在没有绝对位置的情况下进行定位。 – MIkeMo

@MichaelMorin如果你在你的问题中添加了一个可视化图标，这很有帮助，因此很清楚目标是什么。 – hungerstar

旋转容器并显示孩子inline-block似乎有伎俩。

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

2017-06-21 15:56:23 Dexter0015

回答