body{
    background:#e67e22;
}
#return{
    margin:30px 50px;
    position: relative;
}
a{
    font-size: 30px;
    text-decoration: none;
    color: black;
}
a:hover{
    color: white;
}
.box{
    transform-style: preserve-3d;
    width: 298px;
    height: 298px;
    margin:115px auto;
    position: relative;
    transform: rotateX(0deg) rotateY(0deg);
    transition: 6s;
}
.box:hover,
.box:active{
    transform:rotateX(720deg) rotateY(360deg) rotateZ(360deg);
}
.box>div{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    font-size: 200px;
    border: 2px solid black;
}
#forward{
    background: darkorchid;
    transform: translateZ(150px);
}
#back{
    background: darkturquoise;
    transform: translateZ(-150px) rotateY(180deg);
}
#left{
    background: crimson;
    transform: translateX(-150px) rotateY(-90deg);
}
#right{
    background: darkgreen;
    transform: translateX(150px) rotateY(90deg);
}
#up{
    background: fuchsia;
    transform: translateY(-150px) rotateX(90deg);
}
#down{
    background: gold;
    transform: translateY(150px) rotateX(-90deg);
}