<!DOCTYPE html>

 <html
 <head>
<title>Figure 29</title>
<style type="text/css">
	.container {perspective: 850px; perspective-origin: 50% 0%; height: 50px; width: 800px; border: 1px solid gray; margin-bottom: 10px;}
	.ruler {height: 50px; background: #DED url(img/ticks.gif) repeat-x;
		transform: rotateX(60deg);
		transform-origin: 50% 100%;}

	#d1 {perspective-origin: 0% 0%;}
	#d2 {perspective-origin: 33% 0%;}
	#d3 {perspective-origin: 50% 0%;}
	#d4 {perspective-origin: 67% 0%;}
	#d5 {perspective-origin: 1