<div id="complete_example"></div>

<div id="e_example">
	<div class="palm-text-wrapper">
		<div class="palm-body-text" x-mojo-loc=''>
			Using the CSS transform with the perspective property to give a sense of 3D depth.
		</div>
		
		<div class="palm-body-title" x-mojo-loc=''>
			Example
		</div>
		
		<div class="palm-body-text" x-mojo-loc=''>
			An example of using <em>-webkit-transform</em> with <em>-webkit-perspective</em>, to set the child element to imitate 3D look.
		</div>
		
		<div style="-webkit-perspective:600;">
			<div style="position:relative;height:150px;width:100px;margin:10px auto; ">
				<div style="-webkit-transform-style:preserve-3d;-webkit-transform:rotateX(-15deg)">
					<div style="opacity:.8;position:absolute;-webkit-transform:rotateY(-90deg) translateZ(130px);"><img src="images/photo.jpg" style="width:100px;"/></div>
					<div style="opacity:.8;position:absolute;-webkit-transform:rotateY(-45deg) translateZ(130px)"><img src="images/photo.jpg" style="width:100px;"/></div>
					<div style="opacity:.8;position:absolute;-webkit-transform:rotateY(0deg) translateZ(130px)"><img src="images/photo.jpg" style="width:100px;"/></div>
					<div style="opacity:.8;position:absolute;-webkit-transform:rotateY(45deg) translateZ(130px)"><img src="images/photo.jpg" style="width:100px;"/></div>
					<div style="opacity:.8;position:absolute;-webkit-transform:rotateY(90deg) translateZ(130px)"><img src="images/photo.jpg" style="width:100px;"/></div>
				</div>	
			</div>
		</div>
			
	</div>
</div>

<div id="e_about">
</div>

<div id="e_html">
<div id="container">
   <div id="stage">
      <div id="album">
         <div class="photo p1"><img src="images/photo.jpg"/></div>
         <div class="photo p2"><img src="images/photo.jpg"/></div>
         <div class="photo p3"><img src="images/photo.jpg"/></div>
         <div class="photo p4"><img src="images/photo.jpg"/></div>
         <div class="photo p5"><img src="images/photo.jpg"/></div>
      </div>	
   </div>
</div>	
</div>

<div id="e_css">
#container {
	-webkit-perspective: 600;
}
#stage {
	position: relative;
	height: 150px;
	width: 100px;
}
#album {
	-webkit-transform-style: preserve-3d;
	-webkit-transform: rotateX(-15deg);
}
.photo {
	position: absolute;
	opacity: .8;
}
.p1 {
	-webkit-transform: rotateY(-90deg) translateZ(130px);
}
.p2 {
	-webkit-transform: rotateY(-45deg) translateZ(130px);
}
.p3 {
	-webkit-transform: rotateY(0deg) translateZ(130px);
}
.p4 {
	-webkit-transform: rotateY(45deg) translateZ(130px);
}
.p5 {
	-webkit-transform: rotateY(90deg) translateZ(130px);
}
</div>