<div class="box">
  <div class="heading">Difference between rotating first vs rotating later ( Transform Property ) <a href="https://dev.to/hunzaboy/a-css-tip-to-remember-4h50" target="_blank"> read more </a></div>
  <div class="banner first-rotate">CSS Transform - First Rotate</div>
  <div class="banner last-rotate">CSS Transform - Last Rotate</div>
</div>

body {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background: #e0fbfc;
  height: 100vh;
}
.heading {
  font-size: 1em;
  margin-bottom: 8px;

  a {
    color: #ee6c4d;
  }
}
.box {
  background-color: #3d5a80;
  color: #fff;
  padding: 4em;
  position: relative;
  width: 30vw;
  height: 30vh;
}
.banner {
  background-color: #ee6c4d;
  color: #e0fbfc;
  padding: 1em 2em;
  position: absolute;
  top: 0;
  right: 0;
  transform-origin: top right;
  border: 1px solid #293241;
}
// We are rotating before the translate
.first-rotate {
  transform: rotate(-90deg) translateY(-100%);
}

// here we are using the rotate after the translate
.last-rotate {
  transform: translateY(-100%) rotate(-90deg);
}