3d box

by Vladimir

HTML

<div class="container">

<div class="l-wall">
не кантовать
</div>
<div class="r-wall">

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

</div>
<div class="undertop">

</div>
</div>

CSS

.container {
  margin: 50px;
  position: relative;
  overflow: visible;
    width: 300px;
    height: 300px;
}
.top,
.undertop,
.r-wall,
.l-wall {
  width: 100px;
  height: 100px;
  background: #fff9d8;
  border: 1px solid #000;
  top: 200px;
    position: absolute;
    left: 100px;
    transform: skewY(30deg);
    transform-origin: 100% 100%;
}
.r-wall {
  left: 200px;
  width:80px;
  transform: skewY(-45deg);
    transform-origin: 0% 100%;
}
.top,
.undertop {
    transform: skew(-45deg, 30deg) rotateX(0deg);
    transform-origin: 100% 0%;
    top: 119px;
    left: 180px;
    width: 100px;
    height: 80px;
    box-sizing: border-box;
    z-index: 3;
    transform-perspective:100px;
}
.undertop {
  background: #000;
  z-index: 2;
}
.container:hover .top {
  transform: skew(-45deg, 30deg) rotateX(150deg);
  transition: all 500ms;
}