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.
new.gif
application.gif
Step 2: Add an HTML file to your web application.
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.
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. }
  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. }
  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>
  3. <head>
  5. <title>Tom application</title>
  7. <link href="Sheet1.css" rel="stylesheet" type="text/css" />
  9. <style type="text/css">
  11. .con {
  12. width: 400px;
  13. height: 400px;
  14. border: 1px solid #0000FF;
  15. margin: 40px;
  16. }
  18. .con figure {
  19. display: block;
  20. width: 100px;
  21. height: 100px;
  22. float: left;
  23. margin: 15px;
  24. }
  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. }
  35. #Yellow {
  36. -webkit-perspective: 400px;
  37. -moz-perspective: 400px;
  38. -ms-perspective: 400px;
  39. -o-perspective: 400px;
  40. perspective: 400px;
  41. }
  42. </style>
  44. </head>
  46. <body bgcolor="#ffcccc">
  48. <h1 style="background-color: #FF99FF">
  50. Used HTML5 and CSS
  52. </h1>
  54. <section id="red" class="con">
  56. <figure></figure>
  58. <figure></figure>
  60. <figure></figure>
  62. <figure></figure>
  64. <figure></figure>
  66. </section>
  68. </body>
  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: