<div id="panel_div_id" class="panel_div">
  <div id="panel_l_div_id" class="panel_l_div" onmousemove="reset_panel( 'panel_div_id' );">
  Left panel
  </div>
  <div id="panel_f_div_id" class="panel_f_div">
  Face panel
  </div>
  <div id="panel_r_div_id" class="panel_r_div" onmousemove="reset_panel( 'panel_div_id' );">
  Right panel
  </div>
 </div>

.panel_div
{
	position: absolute;
	top: 125px;
	bottom: 0;
	left: 325px;
	width: 600px;
	min-height: 400px;
	transform-style: preserve-3d;
	transform-origin: 50% 50% -300px;
	transform: perspective(4000px) translate3d(0,0,-300px);
	transition: all 1s ease;
}
.panel_div div
{
	position: absolute;
	width: 100%;
	height: 100%;
	font-size: 50px;
	text-align: center;
}
.panel_f_div
{
	background-color: yellow;
}
.panel_l_div
{
	background-color: red;
	transform-origin: right 0;
	transform: translateX( -100% ) rotate3d( 0, 1, 0, -90deg );
}
.panel_r_div
{
	background-color: #dfd;
	transform-origin: left 0;
	transform: translateX( 100% ) rotate3d( 0, 1, 0, 90deg );
}

panel_div.style.transform = "perspective(4000px) rotate3d( 0, 1, 0, 0deg)";