<div style="width: 300px; height: 300px; overflow: hidden; position: relative">
<img src="cible.gif" id="cible1" style="width: 300px; height: 300px; position:absolute; z-index:1" alt="infinite zoom" />
<img src="cible.gif" id="cible2" style="width: 300px; height: 300px; position:absolute; z-index:2" alt="infinite zoom" />
<img src="cible.gif" id="cible3" style="width: 300px; height: 300px; position:absolute; z-index:3" alt="infinite zoom" />
</div>
<input type="button" value="Start" onclick="clearInterval(timer); timer=setInterval('zoomin()', 10)" />
<input type="button" value="Stop" onclick="clearInterval(timer)" />
<script type="text/javascript">
var scale = 1;
var timer;
function zoomin(cible) {
var elm1 = document.getElementById('cible1');
var elm2 = document.getElementById('cible2');
var elm3 = document.getElementById('cible3');
scale = scale * 1.05;
if (scale > 9) scale = 1;
elm1.style.WebkitTransform = 'scale('+scale+')';
elm2.style.WebkitTransform = 'scale('+(scale/9)+')';
elm3.style.WebkitTransform = 'scale('+(scale/81)+')';
elm1.style.MozTransform = 'scale('+scale+')';
elm2.style.MozTransform = 'scale('+(scale/9)+')';
elm3.style.MozTransform = 'scale('+(scale/81)+')';
elm1.style.transform = 'scale('+scale+')';
elm2.style.transform = 'scale('+(scale/9)+')';
elm3.style.transform = 'scale('+(scale/81)+')';
elm1.style.OTransform = 'scale('+scale+')';
elm2.style.OTransform = 'scale('+(scale/9)+')';
elm3.style.OTransform = 'scale('+(scale/81)+')';
}
</script>
this looks fantastic. ty for sharing it!