Post
Ask Question

Develop Simple 3D Application Using HTML5 Tools

Introduction

 
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 a simple 3D application. We know that HTML is HyperText Markup Language and is used to display data in a browser.
 
If we compare 3D graphics with the real world has the advantage of being infinite in size and detail down to the atoms that make up molecules that makeup materials that makeup objects and so on and so forth. Obviously computing devices can only store and process a limited amount of data. So when attempting to model the real world shortcuts need to be taken and if you look closely enough at any digitized picture, you will see flaws that are not visible in the real world.
 
CSS is the acronym for Cascading Style Sheet that is used for design. CSS defines HOW HTML elements are to be displayed. Styles are normally saved in external .css files. External style sheets enable you to change the appearance and layout of all the pages in a Web site, just by editing one single file. CSS stands for Cascading Style Sheets. It is a way to divide the content from the layout on web pages.
 
Step1: Open the HTML editor.
  • Click the start button -> notepad.
  • The name of notepad is on your choice.
  • There name of notepad is "hunter".
notepad.gif
 
Step2: Create a folder.
  • In any drive create a folder with the name of your choice.
  • There we create folder in D drive with the name "Tom".
ffghgh.gif
 
Step3: Set the style on your 3D application.
 
Code
  1. <style>  
  2.     #anim1 {  
  3.         -webkit-perspective: 800;  
  4.         perspective: 800;  
  5.         margin: 100px 0 100px 50px;  
  6.       }  
  7.       #anim1 iframe {  
  8.         -webkit-transition: -webkit-transform 1s ease-in-out;  
  9.         -webkit-transform: rotate3d(0, 1, 1, 30deg);  
  10.         transition: transform 1s ease-in-out;  
  11.         transform: rotate3d(0, 1, 1, 30deg);  
  12.       }  
  13.       #anim1 iframe:hover {  
  14.         -webkit-transform: rotate3d(0, 0, 1, 30deg);  
  15.         transform: rotate3d(0, 0, 1, 30deg);  
  16.       }  
  17. </style>  
1.gif
 
Step4: There is nothing better than jumping straight in. In this sample we will apply a basic set of rotations of an arbitrary DOM element. We start by defining a perspective on the root element  
  1. <div style="-webkit-perspective: 800; perspective: 800; margin: 100px 0 0 50px">  
Perspective is important because it defines how the depth of the CSS3 3D scene is rendered, values from 1-1000 will produce a very pronounced effect, and values over 1000 less so.
 
We then add an iframe and apply a 30-degree rotation around the Z and Y-axis :
  1. <iframe src="http://www.html5rocks.com/" style="-webkit-transform: rotate3d(0, 1, 1, 30deg)"></iframe>  
That is it the element is fully interactive and in all respects, it is a fully-fledged DOM element.
 
Step5: Set the animated properties in  your application.
 
Code
  1. #anim1 iframe {  
  2.         -webkit-transition: -webkit-transform 1s ease-in-out;  
  3.         -webkit-transform: rotate3d(0, 1, 1, 30deg);  
  4.         transition: transform 1s ease-in-out;  
  5.         transform: rotate3d(0, 1, 1, 30deg);  
  6.       }  
  7.       #anim1 iframe:hover {  
  8.         -webkit-transform: rotate3d(0, 0, 1, 30deg);  
  9.         transform: rotate3d(0, 0, 1, 30deg);  
  10.       }  
Step6: Write a simple iframe with no rotation applied.
 
Code
  1. <html>  
  2.     <body>  
  3.         <div style="-webkit-perspective: 800; perspective: 800; margin: 100px 0 100px 50px">  
  4.             <iframe src="http://www.c-sharpcorner.com/" style="-webkit-transform: rotate3d(0, 1, 1, 30deg); transform: rotate3d(0, 1, 1, 30deg  
  5.             ;"></iframe>  
  6.         </div>  
  7.     </body>  
  8. </html>  
2.gif
 
Step7: The complete animated application is:
 
Code
  1. <html>  
  2.     <head>  
  3.         <style>  
  4.             #anim1 {  
  5.         -webkit-perspective: 800;  
  6.         perspective: 800;  
  7.         margin: 100px 0 100px 50px;  
  8.       }  
  9.       #anim1 iframe {  
  10.         -webkit-transition: -webkit-transform 1s ease-in-out;  
  11.         -webkit-transform: rotate3d(0, 1, 1, 30deg);  
  12.         transition: transform 1s ease-in-out;  
  13.         transform: rotate3d(0, 1, 1, 30deg);  
  14.       }  
  15.       #anim1 iframe:hover {  
  16.         -webkit-transform: rotate3d(0, 0, 1, 30deg);  
  17.         transform: rotate3d(0, 0, 1, 30deg);  
  18.       }  
  19.         </style>  
  20.     </head>  
  21.     <body>  
  22.         <div id="anim1">  
  23.             <iframe src="http://www.c-sharpcorner.com/" WIDTH="500" HEIGHT="500"></iframe>  
  24.         </div>  
  25.     </body>  
  26. </html>  
4.gif
 
Step8: Run the code on your browser.
 
Output
 
 3.gif


Similar Articles