:root {
  perspective: 500vmin;
  --side-height: 1.5em;
  --default-color: rgba(127, 127, 127, .2);
  --hover-color: rgba(0, 0, 255, .2);
  --box-shadow: 1px 1px 10px rgba(0, 0, 0, .1);
  --transform-duration: .3s;
}

body {
  min-height: 100vh;
  font: normal 1em/1.4 helvetica, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.message {
  font: 100 2em/1.5 helvetica, sans-serif;
}

.demo {
  transform-style: preserve-3d;
  transform: rotateY(-40deg) rotateX(40deg);
}
.demo * {
  display: block;
  padding: 1em;
  margin: 0.5em;
  position: relative;
  background: var(--default-color);
  transform-style: preserve-3d;
  transform: translateZ(0);
  transition: transform var(--transform-duration);
}
.demo *::before, .demo *::after {
  content: "";
  display: block;
  position: absolute;
  background: transparent;
  transition: all var(--transform-duration);
}
.demo *::before {
  width: 100%;
  height: var(--side-height);
  left: 0;
  bottom: 0;
  transform-origin: center bottom;
  transform: scaleY(0) rotateX(90deg);
}
.demo *::after {
  width: var(--side-height);
  height: 100%;
  right: 0;
  top: 0;
  transform-origin: right center;
  transform: scaleX(0) rotateY(-90deg);
}
.demo *:hover {
  background: var(--hover-color);
  transform: translateZ(var(--side-height));
  box-shadow: var(--box-shadow);
}
.demo *:hover::before, .demo *:hover::after {
  background: var(--hover-color);
}
.demo *:hover::before {
  transform: scaleY(1) rotateX(90deg);
}
.demo *:hover::after {
  transform: scaleX(1) rotateY(-90deg);
}
.demo *:empty {
  display: none;
}