等距图标导航栏(isometric icon Nav Bar)

示例

HTML

<ul class="icon-list">
  <li class="icon-list__item">
    <a href="#">
      <div class="box">
        <div class="box__face box__face--front">
          <i class="fas fa-user"></i>
        </div>
        <div class="box__face box__face--back"></div>
        <div class="box__face box__face--right"></div>
        <div class="box__face box__face--left"></div>
        <div class="box__face box__face--top"></div>
        <div class="box__face box__face--bottom"></div>
      </div>
    </a>
  </li>
  <li class="icon-list__item">
    <a href="#">
      <div class="box">
        <div class="box__face box__face--front">
          <i class="fas fa-compass"></i>
        </div>
        <div class="box__face box__face--back"></div>
        <div class="box__face box__face--right"></div>
        <div class="box__face box__face--left"></div>
        <div class="box__face box__face--top"></div>
        <div class="box__face box__face--bottom"></div>
      </div>
    </a>
  </li>
  <li class="icon-list__item">
    <a href="#">
      <div class="box">
        <div class="box__face box__face--front">
          <i class="fas fa-bell"></i>
        </div>
        <div class="box__face box__face--back"></div>
        <div class="box__face box__face--right"></div>
        <div class="box__face box__face--left"></div>
        <div class="box__face box__face--top"></div>
        <div class="box__face box__face--bottom"></div>
      </div>
    </a>
  </li>
  <li class="icon-list__item">
    <a href="#">
      <div class="box">
        <div class="box__face box__face--front">
          <i class="fas fa-cog"></i>
        </div>
        <div class="box__face box__face--back"></div>
        <div class="box__face box__face--right"></div>
        <div class="box__face box__face--left"></div>
        <div class="box__face box__face--top"></div>
        <div class="box__face box__face--bottom"></div>
      </div>
    </a>
  </li>
  <li class="icon-list__item">
    <a href="#">
      <div class="box">
        <div class="box__face box__face--front">
          <i class="fas fa-envelope"></i>
        </div>
        <div class="box__face box__face--back"></div>
        <div class="box__face box__face--right"></div>
        <div class="box__face box__face--left"></div>
        <div class="box__face box__face--top"></div>
        <div class="box__face box__face--bottom"></div>
      </div>
    </a>
  </li>
  <li class="icon-list__item">
    <a href="#">
      <div class="box">
        <div class="box__face box__face--front">
          <i class="fas fa-code"></i>
        </div>
        <div class="box__face box__face--back"></div>
        <div class="box__face box__face--right"></div>
        <div class="box__face box__face--left"></div>
        <div class="box__face box__face--top"></div>
        <div class="box__face box__face--bottom"></div>
      </div>
    </a>
  </li>
  <li class="icon-list__item">
    <a href="#">
      <div class="box">
        <div class="box__face box__face--front">
          <i class="fas fa-star"></i>
        </div>
        <div class="box__face box__face--back"></div>
        <div class="box__face box__face--right"></div>
        <div class="box__face box__face--left"></div>
        <div class="box__face box__face--top"></div>
        <div class="box__face box__face--bottom"></div>
      </div>
    </a>
  </li>
  <li class="icon-list__item">
    <a href="#">
      <div class="box">
        <div class="box__face box__face--front">
          <i class="fas fa-heart"></i>
        </div>
        <div class="box__face box__face--back"></div>
        <div class="box__face box__face--right"></div>
        <div class="box__face box__face--left"></div>
        <div class="box__face box__face--top"></div>
        <div class="box__face box__face--bottom"></div>
      </div>
    </a>
  </li>
  <li class="icon-list__item">
    <a href="#">
      <div class="box">
        <div class="box__face box__face--front">
          <i class="fas fa-clipboard"></i>
        </div>
        <div class="box__face box__face--back"></div>
        <div class="box__face box__face--right"></div>
        <div class="box__face box__face--left"></div>
        <div class="box__face box__face--top"></div>
        <div class="box__face box__face--bottom"></div>
      </div>
    </a>
  </li>
  <li class="icon-list__item">
    <a href="#">
      <div class="box">
        <div class="box__face box__face--front">
          <i class="fas fa-coffee"></i>
        </div>
        <div class="box__face box__face--back"></div>
        <div class="box__face box__face--right"></div>
        <div class="box__face box__face--left"></div>
        <div class="box__face box__face--top"></div>
        <div class="box__face box__face--bottom"></div>
      </div>
    </a>
  </li>
</ul>

CSS

// Thanks to https://3dtransforms.desandro.com/box

body {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
  background: #f2f2f2;
}

.icon-list {
  display: flex;
  list-style-type: none;
  transform-style: preserve-3d;
  transform: rotateX(50deg) rotateZ(50deg);

  .icon-list__item {
    a {
      .box {
        --box-width: 60px;
        --box-height: 80px;
        --box-depth: 20px;

        width: var(--box-width);
        height: var(--box-height);
        position: relative;
        transform-style: preserve-3d;
        transition: 0.5s;

        .box__face {
          position: absolute;
          font-size: 10px;
          font-weight: bold;
          text-align: center;
        }

        .box__face--front,
        .box__face--back {
          width: var(--box-width);
          height: var(--box-height);
          line-height: var(--box-height);
        }

        .box__face--right,
        .box__face--left {
          width: var(--box-depth);
          height: var(--box-height);
          left: calc((var(--box-width) - var(--box-depth)) / 2);
          line-height: var(--box-height);
        }

        .box__face--top,
        .box__face--bottom {
          width: var(--box-width);
          height: var(--box-depth);
          top: calc((var(--box-height) - var(--box-depth)) / 2);
          line-height: var(--box-depth);
        }

        .box__face--front {
          background: black;
          transition: 0.25s;

          i {
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            width: 100%;
            height: 100%;
            font-size: 24px;
            line-height: 2;
            color: hsl(0, 0, 34%);
            transform: rotate(270deg);
            transition: 0.5s;
          }
        }

        .box__face--right {
          background: black;
          transition: 0.25s;
        }

        .box__face--bottom {
          background: black;
          transition: 0.25s;
        }

        .box__face--back {
          box-shadow: -2em 2.5em 0 #e1e1e1;
          transition: 0.25s;
        }

        .box__face--front {
          transform: rotateY(0deg) translateZ(calc(var(--box-depth) / 2));
        }
        .box__face--back {
          transform: rotateY(180deg) translateZ(calc(var(--box-depth) / 2));
        }

        .box__face--right {
          transform: rotateY(90deg) translateZ(calc(var(--box-width) / 2));
        }
        .box__face--left {
          transform: rotateY(-90deg) translateZ(calc(var(--box-width) / 2));
        }

        .box__face--top {
          transform: rotateX(90deg) translateZ(calc(var(--box-height) / 2));
        }
        .box__face--bottom {
          transform: rotateX(-90deg) translateZ(calc(var(--box-height) / 2));
        }
      }
    }

    &:hover {
      @for $i from 1 through 10 {
        &:nth-child(#{$i}) a {
          .box {
            --box-depth: 30px;
            transform: translateZ(24px);

            .box__face--back {
              box-shadow: -1.5em 1.5em 0 #e1e1e1;
            }
          }

          .box__face--front {
            background: #3498db;

            i {
              color: #fffcfb;
            }
          }

          .box__face--right {
            background: darken(#3498db, 20%);
          }

          .box__face--bottom {
            background: darken(#3498db, 20%);
          }
        }
      }
    }
  }
}

更多有趣示例 尽在 小红砖社区https://xhz.bos.xyz