Code solutions to PHP, JS, CSSCode source PHP, JS, CSS

Spread your code soluces to the world

Love me
Solucior » CSS » Infinite zoom CSS3 and Javascript

Infinite zoom CSS3 and Javascript

06/06/2011 by Dux   -   4.9/5 (7 ratings)

Here is an example of the use of CSS3 with scale.

Update :
Added compatibility with Opera 11

Demo.

infinite zoom infinite zoom infinite zoom

source code



 
<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>

Tested with Safari  Google Chrome  Firefox4  Opera  
Rate this code     |     Copied : 46x

Comments for Infinite zoom CSS3 and Javascript

be     03/22/2012 05:21
this looks fantastic.  ty for sharing it!
nes     06/17/2011 14:59
ok
Add a comment Nickname
ZOOM


Infinite zoom CSS3 and Javascript
Zoom with CSS3
Rotate and scale with CSS
Javascript Image magnification