Edit in JSFiddle

<div class="canvas">
    <div class="cube">
        <div class="front face"></div>
        <div class="back face"></div>
        <div class="top face"></div>
        <div class="bottom face"></div>
        <div class="left face"></div>
        <div class="right face"></div>
    </div>
</div>

@-webkit-keyframes spin-anim {
    from {
        -webkit-transform: rotateY(0);
    }
    to {
        -webkit-transform: rotateY(360deg);
    }
}
@keyframes spin-anim {
    from {
        transform: rotateY(0);
    }
    to {
        transform: rotateY(360deg);
    }
}
.cube {
    -webkit-animation: spin-anim 10s infinite linear;
    animation: spin-anim 10s infinite linear;
     transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}
.canvas {
    width:100px;
    height:100px;
    -webkit-perspective: 500px;
    perspective: 500px;
    margin:50px;
}
.face {
    background-color:blue;
    width:100px;
    height:100px;
    position:absolute;
    border:1px solid black;
}
.front {
    transform: translateZ(50px);
    -webkit-transform:translateZ(50px);
    background-color:blue;
}
.back {
    background-color:red;
    transform: rotateX(180deg) translateZ(50px);
    -webkit-transform:rotateX(180deg) translateZ(50px);
}
.top {
    background-color:green;
    transform: rotateX(90deg) translateZ(50px);
    -webkit-transform:rotateX(90deg) translateZ(50px);
}
.bottom {
    background-color:purple;
    transform: rotateX(-90deg) translateZ(50px);
    -webkit-transform:rotateX(-90deg) translateZ(50px);
}
.left {
    background-color:yellow;
    transform: rotateY(-90deg) translateZ(50px);
    -webkit-transform:rotateY(-90deg) translateZ(50px);
}
.right {
    background-color:salmon;
    transform: rotateY(90deg) translateZ(50px);
    -webkit-transform:rotateY(90deg) translateZ(50px);
}