cube animation

by Richard Hunter

HTML

<div class='container'>
    <div class='square'>
        <div class='face alpha'></div>
        <div class='face beta'></div>
        <div class='face gamma'></div>
        <div class='face delta'></div>
        <div class='face epsilon'></div>
        <div class='face zeta'></div>
    </div>
</div>

CSS

.container {
    width : 500px;
    height : 500px;
    margin : auto;
    border : solid 1px black;
    background: url(http://www.universe-beauty.com/albums/userpics/1/7/stars-and-planets-photo-img355-JPG.jpg);
    perspective : 400px;
    
}
.square {
    transform-style: preserve-3d;
    animation: anim 2s linear infinite;
    position : relative;
    margin : auto;
    top : 200px;
    left : 200px;
    transform : rotate3d(1, 0, 1, 0deg);
}
.face {
    background : red;
    width : 100px;
    height : 100px;
    position : absolute;
    left : 0; top : 0;
    opacity : 0.4;
    border : solid 1px black;
}
.alpha {
    transform : translateX(50px) rotateY(90deg);
}
.beta {
    transform : translateX(-50px) rotateY(90deg);
}
.gamma {
    transform : translateZ(50px); 
}
.delta {
    transform : translateZ(-50px); 
}
.epsilon { transform : rotateX(90deg) translateZ(50px)}
.zeta { transform : rotateX(90deg) translateZ(-50px); }

@keyframes anim {
    to {transform : rotate3d(1, 0, 1, 360deg);}
}