January 7, 2016

CSS scaleX and scaleY
by Jamie Johnson

Many know about the use of JavaScript for image swapping to create stop-motion or the use of transform: rotate(90deg) or something similar to create effects. The properties scaleX for horizontal and scaleY for vertical offer another way to alter images or objects. To flip, use -1. Default is 1. If you use values less than -1 or greater than 1, then the image will be skewed, which can be useful for certain effects. Check out the example below to learn how you can mix these properties with some JavaScript and have more options in your toolbox.

Consider this image:

Here's what happens with transform: scaleX(-1); applied to the inline style attribute:

Here's what happens with transform: scaleY(-1); applied to the inline style attribute:

Here's what happens with transform: scaleY(-1); applied to the inline style attribute of the image, but within a div that has transform: scaleX(-1);float:left; applied to the inline style attribute (more on the floating later):

So, with all that in mind, let's have Wonder Woman do a gym dance workout with one-handed handsprings! (i.e., apply styles with JavaScript timed) :)

 

 

Here's the code:

<p style="font-size:2em;font-weight:bold">Controls:  

<a title="slower" href="javascript:wwspd+=50;" style="margin-right:50px;text-decoration:none;">&lt;</a> 

<a title="default" href="javascript:wwspd=500;" style="margin-right:50px;text-decoration:none;">=</a> 

<a title="faster" href="javascript:wwspd-=50;" style="text-decoration:none;margin-right:50px;">&gt;</a> 

<a title="stay on feet" href="javascript:stayonfeet=true;stayonhands=false;" style="text-decoration:none;margin-right:50px;">stay on feet</a> 

<a title="full workout" href="javascript:stayonfeet=false;stayonhands=false;" style="text-decoration:none;margin-right:50px;">full workout</a> 

<a title="stay on hands" href="javascript:stayonhands=true;stayonfeet=false;" style="text-decoration:none;margin-right:50px;">stay on hands</a> 

<a title="stop" href="javascript:go=false;" style="text-decoration:none;margin-right:50px;">stop</a> 

<a title="go" href="javascript:go=true;wondergym();" style="text-decoration:none;margin-right:50px;">go</a> 

</p> 

<div id="gymmat"> 

<img id="gymnast" src="http://howzyerteeth.beacondeacon.com/Batman/61/wonder-woman-transparent-bg.png" /> 

</div> 

<p style="clear:both">&nbsp;</p> 

<script> 

var ww=0; 

var wwspd=500; 

var wwqty=4; 

var stayonfeet=false; 

var stayonhands=false; 

var go=true;  

function wondergym(){ 

if(go){ 

	if(ww>3){ ww=0; } 

	if(ww==0){ 

	if(stayonhands==false){ 

	document.getElementById('gymmat').style=''; 

	document.getElementById('gymnast').style=''; 

	} 

	} 

	if(ww==1){ 

	if(stayonfeet==false){ 

	document.getElementById('gymmat').style='transform:scaleX(-1);float:left;'; 

	document.getElementById('gymnast').style='transform:scaleY(-1)'; 

	} 

	} 

	if(ww==2){ 

	if(stayonfeet==false){ 

	document.getElementById('gymmat').style=''; 

	document.getElementById('gymnast').style='transform:scaleY(-1)'; 

	} 

	} 

	

	if(ww==3){ 

	if(stayonhands==false){ 

	document.getElementById('gymmat').style=''; 

	document.getElementById('gymnast').style='transform:scaleX(-1)'; 

	} 

	} 

	ww++; 

	setTimeout("wondergym()",wwspd); 

} 

} 

wondergym(); 

</script> 

<p style="clear:both;">&nbsp;</p>

Notice that I needed to affect 2 elements - a div and the img for the one scenario as the properties for scaleX and scaleY are not used simultaneously on one object. Also notice that because I was using a div, if I just flipped it, the image went across the screen. So, I imposed a float: left; to prevent that. It would likely be preferable to use transform: rotate(numdeg) and more granularly "move" the object.

Now, there is a time where rotating simply isn't preferable. Remember when I mentioned values less than -1 and values greater than 1? Well, here's what happens if I apply to an image values for scaleX from -25 to 25 using JavaScript. Click the image below to start the effect:

And now Superman is like Stretch Armstrong! ;)

Here's the code:

<div style="text-align:center"> 

<img id="blob" src="http://howzyerteeth.beacondeacon.com/Batman/61/superman-transparent-bg.png" onclick="blobify()" /> 

</div> 

<script> 

var b=0; 

var grow=true; 

function blobify(){ 

	if(grow){ 

	b++; 

	if(b>=25){ grow=false; } 

	} 

	if(!grow){ 

	b--; 

	if(b<=-25) { grow=true; } 

	} 

	document.getElementById('blob').style.transform="scaleX("+b+")"; 

	setTimeout("blobify()",100); 

} 

</script>

Enjoy these new tools!