css正方体旋转

1. HTML

      <div id="solid">
        <div>11</div>
        <div>22</div>
        <div>33</div>
        <div>44</div>
        <div>55</div>
        <div>66</div>
      </div>

2. CSS

#solid {
      height: 180px;
      width: 180px;
      position: relative;
      margin: 200px auto;
      transform: rotateX(30deg)rotateY(30deg);
      transform-style: preserve-3d;
      animation: name 10s infinite;
    }

    @-webkit-keyframes name {
      from {
        transform: rotateX(30deg) rotateY(30deg);
      }
      to {
        transform: rotateX(30deg) rotateY(390deg);
      }
    }

    #solid div {
      height: 180px;
      width: 180px;
      position: absolute;
      font-size: 70px;
      // border: 20px red double;
      border: 1px solid red;
      line-height: 180px;
      text-align: center;
    }

    #solid div:nth-child(1) {
      transform: rotateY(90deg);
      transform-origin: right;
    }

    #solid div:nth-child(2) {}

    #solid div:nth-child(3) {
      transform: rotateY(-90deg);
      transform-origin: left;
    }

    #solid div:nth-child(4) {
      transform: translateZ(180px);
    }

    #solid div:nth-child(5) {
      transform: rotateX(-90deg);
      transform-origin: bottom;
    }

    #solid div:nth-child(6) {
      transform: rotateX(90deg);
      transform-origin: top;
    }