 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Css TRANFORM</title>
<style>
#transform1{
transform: rotate( -20deg );}
#transform2{
transform: rotateX( -45deg );}
#transform3{
transform: rotateY( -45deg );}
#transform4{
transform: rotate3d( 30, 0, 0, 30deg);}
#transform5{
transform: scaleX( 0.8 );}
#transform6{
transform: scaleY( 0.8 );}
#transform7{
transform: skewX( 20deg );}
#transform8{
transform: skewY( 20deg );}
#transform9{
transform-origin:20% 40%;}
</style>
</head>
<body>
<table width="500" height="500" border="0" align="center">
<tr>
<td align="center" valign="middle"><img id="transform1" src="madarka.jpg" width="150" height="120" /></td>
<td align="center" valign="middle"><img id="transform2" src="madarka.jpg" width="150" height="120" /></td>
<td align="center" valign="middle"><img id="transform3" src="madarka.jpg" width="150" height="120" /></td>
</tr>
<tr>
<td align="center" valign="middle"><img id="transform4" src="madarka.jpg" width="150" height="120" /></td>
<td align="center" valign="middle"><img id="transform5" src="madarka.jpg" width="150" height="120" /></td>
<td align="center" valign="middle"><img id="transform6" src="madarka.jpg" width="150" height="120" /></td>
</tr>
<tr>
<td align="center" valign="middle"><img id="transform7" src="madarka.jpg" width="150" height="120" /></td>
<td align="center" valign="middle"><img id="transform8" src="madarka.jpg" width="150" height="120" /></td>
<td align="center" valign="middle"><img id="transform9" src="madarka.jpg" width="150" height="120" /></td>
</tr>
</table>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Css TRANFORM</title>
<style>
#transform1{
transform: rotate( -20deg );}
#transform2{
transform: rotateX( -45deg );}
#transform3{
transform: rotateY( -45deg );}
#transform4{
transform: rotate3d( 30, 0, 0, 30deg);}
#transform5{
transform: scaleX( 0.8 );}
#transform6{
transform: scaleY( 0.8 );}
#transform7{
transform: skewX( 20deg );}
#transform8{
transform: skewY( 20deg );}
#transform9{
transform-origin:20% 40%;}
</style>
</head>
<body>
<table width="500" height="500" border="0" align="center">
<tr>
<td align="center" valign="middle"><img id="transform1" src="madarka.jpg" width="150" height="120" /></td>
<td align="center" valign="middle"><img id="transform2" src="madarka.jpg" width="150" height="120" /></td>
<td align="center" valign="middle"><img id="transform3" src="madarka.jpg" width="150" height="120" /></td>
</tr>
<tr>
<td align="center" valign="middle"><img id="transform4" src="madarka.jpg" width="150" height="120" /></td>
<td align="center" valign="middle"><img id="transform5" src="madarka.jpg" width="150" height="120" /></td>
<td align="center" valign="middle"><img id="transform6" src="madarka.jpg" width="150" height="120" /></td>
</tr>
<tr>
<td align="center" valign="middle"><img id="transform7" src="madarka.jpg" width="150" height="120" /></td>
<td align="center" valign="middle"><img id="transform8" src="madarka.jpg" width="150" height="120" /></td>
<td align="center" valign="middle"><img id="transform9" src="madarka.jpg" width="150" height="120" /></td>
</tr>
</table>
</body>
</html>
No comments:
Post a Comment