Step 1: First open a HTML editor such as Notepad.
- Open start->Notepad.
- The name of editor is "slide".
Step 2: Create a Folder on a desktop.
- Right-click on desktop->new->Folder.
- Name of folder is "Tom".
Step 3: Open Visual Studio.
- Go to file -> New->Projects.
- Crete an ASP. NET Web Application.
- Name of "cube.aspx".
Step 4: Add a HTML file to your web application.
- Right-click on Solution Explorer.
- Add->add new item->HTML form.
- The Name of the HTML form is "Democube.html".
Step 5: Now in this step we apply a style of cube page. Set a color and background color of a page.
Code
body *
{
font-family:Verdana;
font-size: 24px;
}
body.red
{
background-color:Orange;
color:Green;
}
body.sky
{
background-color:Green;
color:Orange;
}
body.sky a:link, body.sky a:visited, body.sky a:hover, body.sky a:active
{
color:Orange;
}
body.red a:link, body.red a:visited, body.red a:hover, body.red a:active
{
color:Green;
}
span.spaceyspan { margin-right: 20px; }
div.centeredDiv { text-align: center; }
li { list-style: none; }
td { padding-right: 10px; }
</style>
Step 6: Now in this step we set one HTML5 tool named canvas and set a height and width of a canvas.
Code
<body class="sky">
<div class="centeredDiv" style="background-color: #FF99CC">
<canvas id="canvas" width="700" height="600">
This is a cube perform a 3D functinality
</canvas>
</div>
Step 7: Now in this step we define a table content that presses a content after that performs an action.
Code
<table>
<tr><td>PRESS t</td><td>→</td><td>Change a color of background</td></tr>
<tr><td>PRESS p</td><td>→</td><td>Perform a pouse functionality</td></tr>
<tr><td>MOUSE</td><td>→</td><td>Rotate a cube</td></tr>
<tr><td>MOUSE + CTRL</td><td>→</td><td>pan a cube</td></tr>
<tr><td>MOUSE + SHIFT</td><td>→</td><td>pan cune on z</td></tr>
<tr><td>MOUSE + CTRL + SHIFT</td><td>→</td><td>Adjust a length</td></tr>
</table>
<script type="text/javascript">
try
{
var pageTracker = _gat._getTracker("UA-8603987-1");
pageTracker._trackPageview();
} catch (err) { }
</script>
Step 8: The complete image of the Democube application is given below.
Step 9: Complete code of cube demo application is given below.
Code
<html>
<head>
<title>Tom application</title>
<style type="text/css">
body *
{
font-family:Verdana;
font-size: 24px;
}
body.red
{
background-color:Orange;
color:Green;
}
body.sky
{
background-color:Green;
color:Orange;
}
body.sky a:link, body.sky a:visited, body.sky a:hover, body.sky a:active
{
color:Orange;
}
body.red a:link, body.red a:visited, body.red a:hover, body.red a:active
{
color:Green;
}
span.spaceyspan { margin-right: 20px; }
div.centeredDiv { text-align: center; }
li { list-style: none; }
td { padding-right: 10px; }
</style>
<body class="sky">
<div class="centeredDiv" style="background-color: #FF99CC">
<canvas id="canvas" width="700" height="600">
This is a cube perform a 3D functinality
</canvas>
</div>
<table>
<tr><td>PRESS t</td><td>→</td><td>Change a color of background</td></tr>
<tr><td>PRESS p</td><td>→</td><td>Perform a pouse functionality</td></tr>
<tr><td>MOUSE</td><td>→</td><td>Rotate a cube</td></tr>
<tr><td>MOUSE + CTRL</td><td>→</td><td>pan a cube</td></tr>
<tr><td>MOUSE + SHIFT</td><td>→</td><td>pan cune on z</td></tr>
<tr><td>MOUSE + CTRL + SHIFT</td><td>→</td><td>Adjust a length</td></tr>
</table>
<script type="text/javascript">
try
{
var pageTracker = _gat._getTracker("UA-8603987-1");
pageTracker._trackPageview();
} catch (err) { }
</script>
</body>
</html>
Step 10: Press Ctrl + F5 to run the application in a browser.
Output
Press the t1 tag; the background color of the cube will change.
Resources
Here is some useful resources