Post
Ask Question

Create Transformations of a Shape Using HTML5

Introduction

 
This is a simple application for beginners showing how to create transformations of a shape using HTML 5 and CSS tools. We know that HTML 5 is the advanced version of HTML. Basically HTML 5 can be used to develop 3D applications. This article is intended to help with the use of HTML5 tools to develop transformations of shape in applications. CSS is the acronym for Cascading Style Sheet that is used for design. CSS defines how HTML elements are to be displayed. The <section> tag defines sections in a document, such as chapters, headers, footers, or any other sections of the document. I hope this article helps to develop transformations of a shape using HTML 5 and CSS tools.
 
Step 1: Open Visual Studio.
  • Go to file -> New->Projects.
  • Create an ASP. NET Web Application.
  • Name of "Shape.aspx".
new.gif
 
application.gif
 
Step 2: Add an HTML file to your web application.
  • Right-click on the Solution Explorer.
  • Add->add new item->HTML form.
  • The Name of the HTML form is "Transform.html".
css.gif
 
html.gif
 
Step 3: In this step, we add a CSS file named Style.css. In the CSS we set font-family, font-size, the color of a transformation of a shape page. 
  • Right-click on the Solution Explorer.
  • Add-> Add New Item.
  • Add the style sheet.
  • Set the name of the style sheet is a "Style.css".  
css.gif
 
css2.gif
 
Code
  1. body  
  2. {  
  3. font-family: "Helvetica Neue";  
  4. font-size: 20px;  
  5. line-height: 30px;  
  6. color: Teal;  
  7. }  
  8. body  
  9. {  
  10. padding: 20px;  
  11. }  
  12. h1  
  13. {  
  14. margin-bottom: 20px;  
  15. } 
Step 4: In this section we set styles of a container; they are height, width and border margin of a shape. The container is used to display a shape.
 
Code
  1. .con {  
  2.   width: 400px;  
  3.   height: 400px;  
  4.   border: 1px solid #0000FF;  
  5.   margin: 40px;  
  6. }  
  7.   
  8. .con figure {  
  9.   display: block;  
  10.   width: 100px;  
  11.   height: 100px;  
  12.   float: left;  
  13.   margin: 15px;  
  14. } 
Step 5: In this section we set a shape background color and degree. Degrees are used to set how many degrees to rotate a shape.
 
Code 
  1. #red figure {  
  2.   background: red;  
  3.   -webkit-transform: perspective( 400px ) rotateX(120deg );  
  4.   -moz-transform: perspective( 400px ) rotateX(120deg );  
  5.   -ms-transform: perspective( 400px ) rotateX(120deg );  
  6.   -o-transform: perspective( 400px ) rotateX(120deg );  
  7.   transform: perspective( 400px ) rotateX(120deg );  
  8. }  
  9.   
  10. #Yellow {  
  11.   -webkit-perspective: 400px;  
  12.   -moz-perspective: 400px;  
  13.   -ms-perspective: 400px;  
  14.   -o-perspective: 400px;  
  15.   perspective: 400px;  
  16. } 
Step 6: In this section we set a body content of a transformations shape page. Now we also set a figure that is used to display in a container.
 
Code
  1. <body bgcolor="#ffcccc">  
  2.     <h1 style="background-color: #FF99FF"> Used HTML5 and CSS</h1>  
  3.     <section id="red" class="con">  
  4.         <figure></figure>  
  5.         <figure></figure>  
  6.         <figure></figure>  
  7.         <figure></figure>  
  8.         <figure></figure>  
  9.     </section>  
  10. </body>  
  11. </html> 
Step 7: Now in this section we set a complete code demo of a transformations shape page.
 
Code
  1. <html>  
  2.   
  3. <head>  
  4.   
  5.  <title>Tom application</title>  
  6.   
  7.  <link href="Sheet1.css" rel="stylesheet" type="text/css" />  
  8.   
  9.  <style type="text/css">  
  10.   
  11.  .con {  
  12.   width: 400px;  
  13.   height: 400px;  
  14.   border: 1px solid #0000FF;  
  15.   margin: 40px;  
  16. }  
  17.   
  18. .con figure {  
  19.   display: block;  
  20.   width: 100px;  
  21.   height: 100px;  
  22.   float: left;  
  23.   margin: 15px;  
  24. }  
  25.   
  26. #red figure {  
  27.   background: red;  
  28.   -webkit-transform: perspective( 400px ) rotateX(120deg );  
  29.   -moz-transform: perspective( 400px ) rotateX(120deg );  
  30.   -ms-transform: perspective( 400px ) rotateX(120deg );  
  31.   -o-transform: perspective( 400px ) rotateX(120deg );  
  32.   transform: perspective( 400px ) rotateX(120deg );  
  33. }  
  34.   
  35. #Yellow {  
  36.   -webkit-perspective: 400px;  
  37.   -moz-perspective: 400px;  
  38.   -ms-perspective: 400px;  
  39.   -o-perspective: 400px;  
  40.   perspective: 400px;  
  41. }  
  42.  </style>  
  43.   
  44. </head>   
  45.   
  46. <body bgcolor="#ffcccc">  
  47.   
  48.    <h1 style="background-color: #FF99FF">  
  49.   
  50.    Used HTML5 and CSS  
  51.   
  52.   </h1>  
  53.   
  54.   <section id="red" class="con">  
  55.   
  56.   <figure></figure>  
  57.   
  58.   <figure></figure>  
  59.   
  60.   <figure></figure>  
  61.   
  62.   <figure></figure>  
  63.   
  64.   <figure></figure>  
  65.   
  66.   </section>  
  67.   
  68. </body>  
  69.   
  70. </html> 
Step 8: Press "Ctrl+F5" to run the application in a browser.
 
Output
 
Change a rotation degree; after that 2 different transformation shapes are given below.
 
out1.gif
 
out2.gif
 
out3.gif
 
out4.gif
Resources
 
Here are some useful resources:


Similar Articles