3D Cube

With perspective

by rulokc

HTML

<div class="container">
    <div class="cube anime">
        <div class="face face-1">1</div>
        <div class="face face-2">2</div>
        <div class="face face-3">3</div>
        <div class="face face-4">4</div>
        <div class="face face-5">5</div>
        <div class="face face-6">6</div>
    </div>
</div>

CSS

.container {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 100px auto;
    -webkit-perspective: 200px;
}
.face {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    border: 1px solid blue;
    font-size: 66px;
    line-height: 100px;
    color: rgba(0,0,0,0.5);
    text-align: center;
}
.face-1 {
    -webkit-transform: rotateY(0deg) translateZ(50px);
}
.face-2 {
    -webkit-transform: rotateY(90deg) translateZ(50px);
}
.face-3 {
    -webkit-transform: rotateY(180deg) translateZ(50px);
}
.face-4 {
    -webkit-transform: rotateY(270deg) translateZ(50px);
}
.face-5 {
    -webkit-transform: rotateX(90deg) translateZ(50px);
}
.face-6 {
    -webkit-transform: rotateX(-90deg) translateZ(50px);
}
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotateY(0deg);
    }    
    100% {
        -webkit-transform: rotateY(360deg);
    }    
}
.anime {
    -webkit-animation-name: spin;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 12s;
    -webkit-transform-style: preserve-3d;
    -webkit-transform-origin: 50px 50px 0;
}