A CodePen by Michael. Pure CSS Perspective Boxes (Animated) v3 - with Controls

index.html

<input type="radio" id="left" name="rotate">
<label for="left">Left</label>
<input type="radio" id="reset" name="rotate" checked>
<label for="reset">Reset</label>
<input type="radio" id="right" name="rotate">
<label for="right">Right</label>
<input type="radio" id="up" name="rotate">
<label for="up">Up</label>
<input type="radio" id="down" name="rotate">
<label for="down">Down</label>

<div class="perspective">
    <div class="cube"></div>
    <div class="cube"></div>
    <div class="cube"></div>
    <div class="cube"></div>
    <div class="cube"></div>
    <div class="cube"></div>
    <div class="cube"></div>
    <div class="cube"></div>
    <div class="cube"></div>
</div>
​

style.css

body {
    font-size: 100%;
}
.perspective {
    background-color: hsla(0,0%,0%,.1);
    background-image: linear-gradient(hsla(0,0%,0%,.1) 2.5%, transparent 2.5%, transparent 97.5%, hsla(0,0%,0%,.1) 97.5%),
                      linear-gradient(left, hsla(0,0%,0%,.1) 2.5%, transparent 2.5%, transparent 97.5%, hsla(0,0%,0%,.1) 97.5%);
    background-size: 3em 3em;
    box-shadow: 0 0 0 .25em hsla(0,0%,0%,.2);
    height: 9em;
    left: 50%;
    margin: -7.5em;
    padding: 3em;
    position: absolute;
    top: 50%;
    transform: perspective(500px) rotateX(45deg) rotateZ(45deg);
    transform-style: preserve-3d;
    transition: 1s;
    width: 9em;
}
.cube,
.cube:after,
.cube:before {
    box-shadow: inset 0 0 0 .25em hsla(0,0%,0%,.1);
    content: '';
    float: left;
    height: 3em;
    position: absolute;
    width: 3em;
}
/* Top */
.cube {
    background-color: #f66;
    position: relative;
    transform: rotateZ(0deg) translateZ(3em);
    transform-style: preserve-3d;
    transition: .25s;
}
/* Left */
.cube:after {
    background-color: #e55;
    transform: rotateX(-90deg) translateY(3em);
    transform-origin: 100% 100%;
}
/* Right */
.cube:before {
    background-color: #d44;
    transform: rotateY(90deg) translateX(3em);
    transform-origin: 100% 0;
}
/* Alternate Colour */
.cube:nth-child(even) {
    background-color: #fc6;
}
.cube:nth-child(even):after {
    background-color: #eb5;
}
.cube:nth-child(even):before {
    background-color: #da4;
}
/* Animation */
@keyframes wave {
    50% { transform: translateZ(4.5em); }
}
.cube:nth-child(1) {
    animation: wave 2s .1s ease-in-out infinite;
}
.cube:nth-child(2) {
    animation: wave 2s .2s ease-in-out infinite;
}
.cube:nth-child(3) {
    animation: wave 2s .4s ease-in-out infinite;
}
.cube:nth-child(4) {
    animation: wave 2s .3s ease-in-out infinite;
}
.cube:nth-child(5) {
    animation: wave 2s .5s ease-in-out infinite;
}
.cube:nth-child(6) {
    animation: wave 2s .7s ease-in-out infinite;
}
.cube:nth-child(7) {
    animation: wave 2s .6s ease-in-out infinite;
}
.cube:nth-child(8) {
    animation: wave 2s .8s ease-in-out infinite;
}
.cube:nth-child(9) {
    animation: wave 2s .9s ease-in-out infinite;
}
/* Labels */
input {
    display: none;
}
label {
    background: #ddd;
    cursor: pointer;
    display: block;
    font-family: sans-serif;
    line-height: 3em;
    position: absolute;
    right: .5em;
    text-align: center;
    top: 4em;
    transition: .25s;
    width: 4.5em;
}
label[for="left"] {
    right: 10.5em;
}
label[for="reset"] {
    right: 5.5em;
}
label[for="up"] {
    right: 5.5em;
    top: .5em;
}
label[for="down"] {
    right: 5.5em;
    top: 7.5em;
}
label:hover {
    background-color: #bbb;
}
input:checked + label {
    background-color: #666;
    color: #fff;
}
#left:checked ~ .perspective {
    transform: perspective(500px) rotateX(45deg) rotateZ(75deg);
}
#right:checked ~ .perspective {
    transform: perspective(500px) rotateX(45deg) rotateZ(15deg);
}
#up:checked ~ .perspective {
    transform: perspective(500px) rotateX(75deg) rotateZ(45deg);
}
#down:checked ~ .perspective {
    transform: perspective(500px) rotateX(15deg) rotateZ(45deg);
}​