IT:AD:CSS/Transforms/Scale [Notes]

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.

# IT:AD:CSS/Transforms/Scale #



<callout type="Navigation" class="small">

* [[../|(UP)]]
{{indexmenu>.#2|nsort tsort}}


</callout>


<panel title="Summary">

Any html object can be scaled.


</panel>


## Process ##


<html>
<style>
.demobox {
  margin:10px;
  width:50px;
  height:50px;
  border:solid 1px #C0C0C0;
  background-color:#F0F0F0;
}
</style>
</html>


Rotations are done using `transform: scale(percentage)` (which can be in only one axis using `scaleX` and `scaleY`):


<sxh css>
.halfscale {
  -webkit-transform: scale(0.5);
  -moz-transform: scale(-0.5);
  -o-transform: scale(-0.5);
  transform: scale(-0.5);
}
</sxh>

<WRAP tip>
The `-webkit-`, `-moz-` and `-o-` prefixes are only applied to account for different browsers...
</WRAP>

<html>
<style>
.halfscale {
  -webkit-transform: scale(0.5);
  -moz-transform: scale(-0.5);
  -o-transform: scale(-0.5);
  transform: scale(-0.5);
}
</style>
</html>

<html>

<div class="demobox halfscale"/>

</html>


## Resources ##

* http://learn.shayhowe.com/advanced-html-css/css-transforms