Edit in JSFiddle

<!DOCTYPE html>
<html>
<head>
    <title>SUPER AWESOME 3D CSS EFFEKT</title>
    <link rel="stylesheet" href="css/super_awesome_cube.css">
</head>
<body>

    <div class="container">
        <div class="cube">
            <div class="side1"></div>
            <div class="side2"></div>
            <div class="side3"></div>
            <div class="side4"></div>
            <div class="side5"></div>
            <div class="side6"></div>
        </div>
    </div>

</body>
</html>

@-webkit-keyframes awesomeCubeRotation {
    from {
        -webkit-transform: rotateY(0deg) rotateX(20deg);
    }

    to {
        -webkit-transform: rotateY(360deg) rotateX(20deg);
    }
}

@-moz-keyframes awesomeCubeRotation {
    from {
        -moz-transform: rotateY(0deg) rotateX(20deg);
    }

    to {
        -moz-transform: rotateY(360deg) rotateX(20deg);
    }
}

body {
    background: #000;
}

.container {
    width: 100px;
    height: 100px;
    margin: 60px auto 0;
    position: relative;
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
}

.cube {
    position: absolute;
    width: 100%;
    height: 100%;

    -webkit-animation: awesomeCubeRotation 5s linear infinite;
    -moz-animation: awesomeCubeRotation 5s linear infinite;

    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.cube > div {
    width: 98px;
    height: 98px;
    position: absolute;
    background: rgba(50, 150, 200, .2);
    border: 1px solid orange;
}

.cube .side1 { 
    -webkit-transform: rotateY(0deg) translateZ( 50px );
  	-moz-transform: rotateY(0deg) translateZ( 50px ); 
}

.cube .side2 { 
    -webkit-transform: rotateX(180deg) translateZ( 50px );
  	-moz-transform: rotateX(180deg) translateZ( 50px );
}

.cube .side3 { 
    -webkit-transform: rotateY(90deg) translateZ( 50px ); 
  	-moz-transform: rotateY(90deg) translateZ( 50px );
}

.cube .side4 { 
    -webkit-transform: rotateY(-90deg) translateZ( 50px );
  	-moz-transform: rotateY(-90deg) translateZ( 50px );
}

.cube .side5    { 
    -webkit-transform: rotateX(90deg) translateZ( 50px );
  	-moz-transform: rotateX(90deg) translateZ( 50px );
}

.cube .side6 { 
    -webkit-transform: rotateX(-90deg) translateZ( 50px );
  	-moz-transform: rotateX(-90deg) translateZ( 50px );
}