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

<div id="e_example">
	<div class="palm-text-wrapper">
		<div class="palm-body-text" x-mojo-loc=''>
			More control to animate objects with CSS animation properties and keyframes. <em>Declared animations</em>.
		</div>
		
		<div class="palm-body-title" x-mojo-loc=''>
			Example
		</div>
		
		<div class="palm-body-text" x-mojo-loc=''>
			Example of an animation effect in 3D, using the @-webkit-keyframes at-rule with <em>-webkit-animation</em> properties.
		</div>
		

		<div style="position:relative;height:150px;width:100px;margin: 0px auto;">
			<div style="-webkit-transform-style: preserve-3d;-webkit-animation:rotateCube 15s linear;">	
				<div style="opacity:.8;position:absolute;-webkit-transform:translateZ(50px);"><img src="images/photo.jpg" style="width:100px;"/></div>
				<div style="opacity:.8;position:absolute;-webkit-transform:rotateX(90deg) translateZ(50px)"><img src="images/photo.jpg" style="width:100px;"/></div>
				<div style="opacity:.8;position:absolute;-webkit-transform:rotateX(-90deg) translateZ(50px)"><img src="images/photo.jpg" style="width:100px;"/></div>
				<div style="opacity:.8;position:absolute;-webkit-transform:rotateY(90deg) translateZ(50px)"><img src="images/photo.jpg" style="width:100px;"/></div>

				<div style="opacity:.8;position:absolute;-webkit-transform:rotateY(180deg) translateZ(50px)"><img src="images/photo.jpg" style="width:100px;"/></div>
				<div style="opacity:.8;position:absolute;-webkit-transform:rotateY(-90deg) translateZ(50px)"><img src="images/photo.jpg" style="width:100px;"/></div>
			</div>
		</div>
	
			
	</div>
</div>

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

<div id="e_html">
<div id="stage">
   <div id="cube">
      <div class="face f1"><img src="images/photo.jpg"/></div>
      <div class="face f2"><img src="images/photo.jpg"/></div>
      <div class="face f3"><img src="images/photo.jpg"/></div>
      <div class="face f4"><img src="images/photo.jpg"/></div>
      <div class="face f5"><img src="images/photo.jpg"/></div>
      <div class="face f5"><img src="images/photo.jpg"/></div>
   </div>	
</div>
	
</div>

<div id="e_css">
@-webkit-keyframes rotateCube {
  	0%  { -webkit-transform: rotateX(0) rotateY(0);}
  	50% { -webkit-transform: rotateX(180deg) rotateY(180deg);}
	100%{ -webkit-transform: rotateX(360deg) rotateY(360deg);}
}
#stage {
	position: relative;
	height: 150px;
	width: 100px;
}
#cube {
	-webkit-transform-style: preserve-3d;
	-webkit-animation: rotateCube 15s linear;
}
.face {
	position: absolute;
	opacity: .8;
}
.f1 {
	-webkit-transform: translateZ(90px);
}
.f2 {
	-webkit-transform: rotateX(90deg) translateZ(90px);
}
.f3 {
	-webkit-transform: rotateX(-90deg) translateZ(90px);
}
.f4 {
	-webkit-transform: rotateY(90deg) translateZ(90px);
}
.f4 {
	-webkit-transform: rotateY(90deg) translateZ(90px);
}
.f5 {
	-webkit-transform: rotateY(180deg) translateZ(90px);
}
</div>