前言

算算日子，马上又要迎来一年一度的告白日：5月20日，单身的小伙伴们是不是也应该行动起来啊，能不能脱单就靠你代码敲得6不6咯，实在不会的，我就拿出我珍藏多年的告白神器，反正我女朋友就是这么到手的，嘿嘿！

神器出手，女朋友到手

思路就是用6个div来实现正方体的6个面，每个面都贴上女朋友美美的照片，再设置6个div的转换角度及位置，最后再给整个正方体加上旋转的动画，就OK了。

HTML代码

<div class="cube">
    <div class="normalStyle one">1</div>
    <div class="normalStyle two">2</div>
    <div class="normalStyle three">3</div>
    <div class="normalStyle four">4</div>
    <div class="normalStyle five">5</div>
    <div class="normalStyle six">6</div>
  </div>

CSS代码

 body {
      background: black;
    }

    /* 正方体 */
    .cube {
      margin: 150px auto;
      height: 200px;
      width: 200px;
      /* 3d旋转效果 */
      transform-style: preserve-3d;
      animation: cubeRotate 5s infinite linear;
    }

    /* 6个面的统一样式 */
    .normalStyle {
      position: absolute;
      width: 200px;
      height: 200px;
      opacity: 0.9;
      line-height: 200px;
      text-align: center;
      color: orange;
      font-size: 50px;
      font-weight: bold;
    }

    /* 左面 */
    .one {
      transform: rotateY(90deg) translateZ(100px);
      background: url('https://test-1256689020.cos.ap-nanjing.myqcloud.com/images/1.png') no-repeat center;
      background-size: 100% 100%;
    }

    /* 右面 */
    .two {
      transform: rotateY(-90deg) translateZ(100px);
      background: url('https://test-1256689020.cos.ap-nanjing.myqcloud.com/images/2.png') no-repeat center;
      background-size: 100% 100%;
    }

    /* 上面 */
    .three {
      transform: rotateX(-90deg) translateZ(100px);
      background: url('https://test-1256689020.cos.ap-nanjing.myqcloud.com/images/3.png') no-repeat center;
      background-size: 100% 100%;
    }

    /* 下面 */
    .four {
      transform: rotateX(90deg) translateZ(100px);
      background: url('https://test-1256689020.cos.ap-nanjing.myqcloud.com/images/4.png') no-repeat center;
      background-size: 100% 100%;
    }

    /* 前面 */
    .five {
      transform: rotateY(0deg) translateZ(100px);
      background: url('https://test-1256689020.cos.ap-nanjing.myqcloud.com/images/5.png') no-repeat center;
      background-size: 100% 100%;
    }

    /* 后面 */
    .six {
      transform: rotateY(180deg) translateZ(100px);
      background: url('https://test-1256689020.cos.ap-nanjing.myqcloud.com/images/6.png') no-repeat center;
      background-size: 100% 100%;
    }

    /* 旋转动画 */
    @keyframes cubeRotate {
      from {
        transform: rotateX(0) rotateZ(0);
      }

      to {
        transform: rotateX(360deg) rotateZ(360deg);
      }
    }
    ```