How to recreate perspective-origin effect by transforming child elements?

http://stackoverflow.com/questions/17203550/how-to-recreate-perspective-origin-effect-by-transforming-child-elements

HTML

<div class='wrapper'>
    <div class='front'>Front</div>
    <div class='back'>Back</div>
    <div class='top'>Top</div>
    <div class='bottom'>Bottom</div>
    <div class='left'>Left</div>
    <div class='right'>Right</div>
</div>

<div class='wrapper'>
    <div class='front'>Front</div>
    <div class='back'>Back</div>
    <div class='top'>Top</div>
    <div class='bottom'>Bottom</div>
    <div class='left'>Left</div>
    <div class='right'>Right</div>
</div>

<div class='wrapper'>
    <div class='front'>Front</div>
    <div class='back'>Back</div>
    <div class='top'>Top</div>
    <div class='bottom'>Bottom</div>
    <div class='left'>Left</div>
    <div class='right'>Right</div>
</div>

<div class='wrapper'>
    <div class='front'>Front</div>
    <div class='back'>Back</div>
    <div class='top'>Top</div>
    <div class='bottom'>Bottom</div>
    <div class='left'>Left</div>
    <div class='right'>Right</div>
</div>

CSS

html, body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.wrapper {
	position: absolute;
	left: 50%;
	margin-left: -120px;
	
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
}
.wrapper:nth-child(1) {
	z-index: 1;
}
.wrapper:nth-child(2) {
	z-index: 2;
}
.wrapper:nth-child(3) {
	z-index: 1;
}
.wrapper:nth-child(4) {
	z-index: 0;
}
.top, .front, .back, .bottom, .left, .right {
	position: absolute;
	width: 240px;
	height: 400px;
	color: #fff;
	font-size: 40px;
	font-weight: bold;
	text-align: center;
	line-height: 400px;
	
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	
	-webkit-animation-duration: 25s;
	animation-duration: 25s;
	
	-webkit-animation-timing-function: ease-in-out;
	animation-timing-function: ease-in-out;
	
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}
.top, .bottom {
	height: 300px;
	line-height: 300px;
}
.left, .right {
	width: 300px;
}
.front, .back {
	-webkit-transform-origin: 50% 50% -150px;
	transform-origin: 50% 50% -150px;
}
.top, .bottom {
	-webkit-transform-origin: 50% 50% -200px;
	transform-origin: 50% 50% -200px;
}
.left, .right {
	-webkit-transform-origin: 50% 50% -120px;
	transform-origin: 50% 50% -120px;
}
.front {
	background-color: #ff0000;
}
.back {
	background-color: #00cc00;
}
.top {
	background-color: #0000ff;
}
.bottom {
	background-color: #cccc00;
}
.left {
	background-color: #00cccc;
}
.right {
	background-color: #ff00ff;
}
.wrapper:nth-child(1) .front {
	-webkit-animation-name: rotate-front-0;
	animation-name: rotate-front-0;
}
.wrapper:nth-child(1) .back {
	-webkit-animation-name: rotate-back-0;
	animation-name: rotate-back-0;
}
.wrapper:nth-child(1) .top {
	-webkit-animation-name: rotate-top-0;
	animation-name: rotate-top-0;
}
.wrapper:nth-child(1) .bottom {
	-webkit-animation-name: rotate-bottom-0;
	animation-name: rotate-bottom-0;
}
.wrapper:nth-child(1) .left {
	-webkit-animation-name: rotate-left-0;
	animation-name:...