*{margin:0;padding:0;}

.box{

    width: 300px;

    height: 300px;

    position: relative;

    margin: 100px;

    transform: rotateX(30deg) rotateY(-30deg);

    transform-style: preserve-3d;

    animation: spin 5s infinite linear;

  }

  .box:after{

    content: ".";

    height: 0;

    clear: both;

    overflow: hidden;

    display: block;

    visibility: hidden;

  }

  .box a{

    text-decoration: none;

    text-align: center;

    line-height: 200px;

    font-size: 35px;

    font-weight: bold;

    color: black;

    position: absolute;

    display: block;

    width: 200px;

    height: 200px;

    background: red;

    opacity: .4;

    transform-style: preserve-3d;

  }

  .box a:nth-child(1){

    background: #fe04ef;

    transform: translateZ(-100px);

  }

  .box a:nth-child(2){

    background: #0497fe;

    transform: translateZ(100px);

  }

  .box a:nth-child(3){

    background: #04fefb;

    transform: rotateY(90deg) translateZ(-100px);

  }

  .box a:nth-child(4){

    background: #fe2d04;

    transform: rotateY(-90deg) translateZ(-100px);

  }

  .box a:nth-child(5){

    background: #effe04;

    transform: rotateX(-90deg) translateZ(-100px);

  }

  .box a:nth-child(6){

    background: #04fe56;

    transform: rotateX(90deg) translateZ(-100px);

  }

​

@keyframes spin {

  from {

    transform: rotateX(-10deg) rotateY(0deg);

  }

  to {

    transform: rotateX(-10deg) rotateY(360deg);

  }

}