Rotated elements overlap each other

Question

Is there a way to fix this, when I rotate 2 elements, they overlap each other because the width and height don't swap.

Thank you

https://jsfiddle.net/aez4uc3u/

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

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

Answer 1

Rotate the container and display the childs as inline-block seems to do the trick.

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

Answer 2

Rotate the parent.

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>

Positioning the div as you might like will take additional transforms and, perhaps, adjusting the transform-origin property.

You shoud also be aware that transform is purely visual. It does not actually affect the positioning or margins of elements.