Edit in JSFiddle

body { overflow: hidden; }
body > div {
  height: 191px;
  left: 0;
  position: relative;
  width: 309px;
}

div {
    outline: 1px black solid;
}

div > div {
  height: 61.8%;
  left: 100%;
  position: absolute;
  -webkit-transform: rotate(0deg);
  -webkit-transform-origin: top left;
  -webkit-transition: -webkit-transform ease-in 1s;
  transform: rotate(0deg);
  transform-origin: top left;
  transition: transform ease-in 1s;
  top: 0;
  width: 61.8%;
  z-index: 100;
}

div:hover > div { -webkit-transform: rotate(90deg); transform: rotate(90deg); }

<div><div><div><div><div><div><div><div><div><div><div><div><div></div></div></div></div></div></div></div></div></div></div></div></div></div>