<html>
<head>
<title>Demo trasformazione</title>
<style>
td {width:20%;}
div {border: 2px solid red; background-color: #FFCC00;
width: 100px; height: 80px;}
div.a { transform: rotate(40deg);}
div.b { transform: skewX(20deg);}
div.c { transform: scaleY(1.5); }
div.d { transform: translate(10px,10px); }
div.tutto { transform: rotate(40deg) skewX(20deg) scaleY(1.5) translate(10px,10px); }
</style>
<body>
<table>
<tr style= "height: 80px;">
<th>Rotate</th>
<th>Skew</th>
<th>Scale</th>
<th>Translate</th>
<th>Multiplo</th>
</tr>
<tr>
<td><div class="a">Rotazione 40 gradi</div></td>
<td><div class="b">Distorsione Asse X 20 gradi</div></td>
<td><div class="c">Scalatura Y x1.5</div></td>
<td><div class="d">Spostamento di 10 pixel</div></td>
<td><div class="tutto">Troppo!!</div></td>
</tr>
</table>
</body>
<html>
Comments