<div class="container">

<div class="top-right"></div>

<div class="top-left"></div>

<div class="bottom-right"></div>

<div class="bottom-left"></div>
  
</div>

.container {
  width:80%;
  height:80vh;
  margin:5vh auto;
  border:2px solid;
  position:relative;
}

.top-right {
  transform-origin: top right;
  right:0;
  top:0;
  transform: rotate(-90deg) translateY(-100%);
}
.top-right:hover {
  transform: rotate(90deg) translateX(100%)
}

.top-left {
  transform-origin: top left;
  left:0;
  top:0;
  transform: rotate(-90deg) translateX(-100%);
}
.top-left:hover {
  transform: rotate(90deg) translateY(-100%) 
}

.bottom-right {
  transform-origin:bottom right;
  right:0;
  bottom:0;
  transform: rotate(-90deg) translateX(100%);
}
.bottom-right:hover {
  transform: rotate(90deg) translateY(100%)
}
.bottom-left {
  transform-origin:bottom left;
  left:0;
  bottom:0;
  transform: rotate(-90deg) translateY(100%);
}
.bottom-left:hover {
  transform: rotate(90deg) translateX(-100%)
}



.container > [class] {
  position: absolute;
  background-color: lightblue;
  padding:10px;
  font-size:25px;
  text-transform:uppercase;
  font-family:sans-serif;
}
.container > [class]::before {
  content:attr(class);
}