使用子元素旋转容器

Question

I'm trying to reconstruct this sidenav_example

This is my html and SCSS:

HTML:

<div class="sidenav-container">
  <div class="sidenav-item" *ngFor="let sidenavItem of sidenav">
    <span>{{ sidenavItem.text }}</span>
    <img [src]="sidenavItem.img" />
  </div>
</div>

SCSS:

.sidenav-container {
  position: absolute;

  .sidenav-item {
    align-items: flex-start;
    transform: rotate(270deg);
    display: flex;

    img {
      width: 5px;
      height: auto;
    }

    span {
      font-size: 2.5pt;
    }
  }
}

If i do it like this i always get this result my_example

Thanks for your help! :)

Answer 1

Try adding:

transform: rotate(90deg);

To 'sidenaev-container' class at your .scss