@charset "UTF-8";
/* CSS Document */

#page { 
        -webkit-perspective: 800;
        -webkit-perspective-origin: 50% -200px;        
        width:600px;
        height:600px;
        margin: 20px auto 0 auto; 
        -webkit-transition: -webkit-perspective, 2s ;     
}

#page:hover { -webkit-perspective-origin: 50% 500px; }

@-webkit-keyframes spin {
    from { -webkit-transform: rotateY(0deg); }
    to  { -webkit-transform: rotateY(-360deg); }
}

#cube {
    margin: 75px auto 0px auto;
    height: 300px;
    width: 300px;
    -webkit-transform-style: preserve-3d;
    -webkit-animation: spin 8s infinite linear ;
}

.photo {
    position: absolute;
    width: 300px;
    height: 300px;
    background: rgba(0,0,0,0.6);
    text-align: center;
    font-family: helvetica neue;
    font-size: 10em;
    color: white;
}

.pic1 { background: url(../images/cat1.jpg);
        -webkit-background-size: 100% 100%;
        opacity: 0.9;
}

.pic2 { background: url(../images/cat2.jpg);
        -webkit-background-size: 100% 100%;  
        opacity: 0.9;    
}

.pic3 { background: url(../images/cat3.jpg);
        -webkit-background-size: 100% 100%; 
        opacity: 0.9;
}

.pic4 { background: url(../images/cat4.jpg);
        -webkit-background-size: 100% 100%;  
        opacity: 0.9;    
}

.pic5 { background: url(../images/cat5.jpg);
        -webkit-background-size: 100% 100%;   
        opacity: 0.9;
}

.pic6 { background: url(../images/cat6.jpg);
        -webkit-background-size: 100% 100%; 
        opacity: 0.9;
}

.shadow { background: darkgrey;
        -webkit-background-size: 90% 90%; 
        opacity: 0.6;
		border-radius: 7px;
		box-shadow: 1px 1px 10px darkgrey;
}

#cube > .pic1 { -webkit-transform: translateZ(150px); }
#cube > .pic2 { -webkit-transform: rotateY(90deg) translateZ(150px); } 
#cube > .pic3 { -webkit-transform: rotateY(180deg) translateZ(150px); } 
#cube > .pic4 { -webkit-transform: rotateY(270deg) translateZ(150px); } 
#cube > .pic5 { -webkit-transform: rotateX(90deg) translateZ(150px); }  
#cube > .pic6 { -webkit-transform: rotateX(-90deg) translateZ(150px); } 
#cube > .shadow { -webkit-transform: rotateX(-90deg) translateZ(200px); }  

​