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

<div id="e_example">
	<div class="palm-text-wrapper">
		<div class="palm-body-text" x-mojo-loc=''>
			Triggering implicit animations by using <em>-webkit-transition</em> properties. 
		</div>
		
		<div class="palm-body-title" x-mojo-loc=''>
			Example
		</div>
		
		<div class="palm-body-text" x-mojo-loc=''>
			The demo shows 2D animation with <em>-webkit-transition</em> by changing the values of <em>-webkit-transform</em> <strong>rotate</strong> and <strong>scale</strong>. Tap a photo to animate!
		</div>
		
		<div style="position:relative;height:300px">
			
			<div class="gallery-photo p1"  style="">
				<img src="images/photo.jpg" alt="photo"/>
				<div>working on my tax</div>
			</div>
		
			<div class="gallery-photo p2"  style="">
				<img src="images/photo2.jpg" alt="photo"/>
				<div>O Hai</div>
			</div>
		
		</div>

	</div>
</div>

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

<div id="e_html">
<div id="gallery">
	<div class="gallery-photo p1">
		<img src="images/photo.jpg"/>
		<div>label 1</div>
	</div>
	<div class="gallery-photo p2">
		<img src="images/photo2.jpg"/>
		<div>label 2</div>
	</div>
</div>	
</div>
</div>

<div id="e_css">
#gallery {
	position: relative;
	height: 300px
}
.gallery-photo {
	position: absolute;
	background: #fff;
	width: 200px;
	height: 240px;
	padding: 10px;
	border: 1px solid #999;	
	-webkit-box-shadow: 5px 8px 15px rgba(0, 0, 0, 0.5);
	-webkit-transition: -webkit-transform .3s ease-out;
}
.gallery-photo div {
	text-align: center;
}
.gallery-photo:active, .gallery-photo:focus {
	z-index: 10;
	-webkit-transform: rotate(0deg) scale(1, 1);
}
.p1{
	top: 15px; 
	left: -10px;
	-webkit-transform: rotate(-15deg) scale(.65,.65);
}
.p2 {
	left: 80px;
	-webkit-transform: rotate(10deg) scale(.75,.75);

}

* on touch screen with no cursor, there is no such action as hover, 
so the :hover pseudo-class is triggered when the element is tapped. 
Notice the "after" state stays after tap action, unlike hover.
</div>